vuex modules 怎麼使用？

vuex modules 怎麼使用？

---

目錄結構：
a.js vuex 模塊
b.js vuex 模塊
index.js vuex
v.vue 結果內容顯示

---

src\store\modules\index.js

import Vue from 'vue';
import Vuex from 'vuex';
import numbers from './a'
import count from './b'
Vue.use(Vuex);
export default new Vuex.Store({
    modules: {
        count,
        numbers
    }
})

---

src\store\modules\a.js

const state = {
    numbers: 11
}
const mutations = {
    add(state) {
        state.numbers++
    },
    minus(state) {
        state.numbers--
    }
}
const actions = {
    add: ({ commit }) => {
        commit('add')
    },
    minus: ({ commit }) => {
        commit("minus")
    }
}
export default {
    namespaced: true, // 開啓命名空間
    state,
    mutations,
    actions
}

---

src\store\modules\b.js

const state = {
    count: 1
}
const mutations = {
    add(state) {
        state.count++
    },
    minus(state) {
        state.count--
    }
}
const actions = {
    add: ({ commit }) => {
        commit('add')
    },
    minus: ({ commit }) => {
        commit("minus")
    }
}
export default {
    namespaced: true, // 開啓命名空間
    state,
    mutations,
    actions
}

---

src\components\v.vue

<template>
  <div>
    <h2>modules vuex內容</h2>
    <h3>
      {{$store.state.count.count}}
      {{$store.state.numbers.numbers}}
    </h3>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
</style>

---

效果：