ノーマル vuex と異なる点

  • /store 配下にファイルを作成するだけで vuex が仕込まれる。Vue.use(Vuex), new Vue({ store }) みたいな設定は一切存在しない。
  • module を使いたい場合には、/store/module1/index.js を作ればいい。この module1 の部分が module name になる。
  • const store = new Vuex.Store({ modules: { module1, module2 }) みたいなことは必要なし！！
  • index.js ファイルに、state, action, mutation, etc... を書く。
  • その際、各要素を export すること。
  • /store/module1/state.js, /store/module1/action.js 等々を書いて分割することもできる。
  • state, action, ...etc を分割した場合、これらを import してまとめる、とかも必要なし！自動！

以下、ノーマル vuex と同じ

  • this.$store.state.moduleName.stateName でアクセス可能。
  • this.$store.commit('moduleName/mutationName', 'params') mutation に commit。
  • this.$store.dispatch('user/changeName', 'changedName') で action を dispatch。
/store/user/index.js
export const state = () => ({
  userName: 'nakanishi'
})

export const mutations = {
  changeName(state, newName) {
    state.userName = newName
  }
}

export const actions = {
  changeName({ commit, dispatch, state }, newName) {
    commit('changeName', newName)
  }
}
/pages/index.js
<template>
  <div>
    <h2>top</h2>
    <div>{{ myName }}</div>
    <button @click="commit">changeName commit mutation</button>
    <button @click="dispatch">changeName dispatch action</button>
  </div>
</template>

<script>
export default {
  computed: {
    myName() {
      return this.$store.state.user.userName
    }
  },
  methods: {
    commit() {
      this.$store.commit('user/changeName', 'changedName')
    },
    dispatch() {
      this.$store.dispatch('user/changeName', 'changedName')
    }
  }
}
</script>

<style></style>