過去記事では制作過程の記事の中に紛れ込ませていましたが、検索しづらいので Vue.js Tips としてまとめていきたいと思います。

Vuex で Action にパラメータを複数を渡す

パラメータを1つ渡すときは

.vue

this.$store.dispatch('items/getItems', this.data01)

store.js

// ...
export const actions = {
  async getItems({ commit }, hoge) {
    // ...
    const variable01 = hoge
    // ...
  }
}
// ...

のように書きますが複数の引数を渡す場合、第3引数が使えないので

.vue

//...
data() {
  return {
    data01: 'データ01',
    data02: 'データ02'
  }
},
methods: {
  ...mapActions({
    getItems() {
      this.$store.dispatch('items/getItems', {
        hoge: this.data01,
        fuga: this.data02
      })
    },
  })
}
//...

store.js

// ...
export const actions = {
  async getItems({ commit }, { hoge, fuga }) {
    // ...
    const variable01 = hoge
    const variable02 = fuga
    // ...
  }
}
// ...

参考： Vuex で Action, Mutation に第3引数を渡したくなったら

v-on: で複数のメソッドを呼び出し

input(
  @click="getItems(); toggleCheck();"
  type="checkbox"
)
// ...
  methods: {
    getItems() {
      // ...
    },
    toggleCheck() {
      // ...
    }
  }

参考： 【Vue】v-onで複数の関数を呼び出す方法 - Qiita