當state資訊足夠龐大時，需要使用模組化把state資料分開管理

1、新建js檔案，匯出一個物件，物件中包含vuex的引數（state、getters、mutations、actions等），在物件中要包含 namespaced:true 屬性，設定帶名稱空間以進行資料訪問。

export default{
    namespaced:true,//帶名稱空間
    state:{
        users:''
    },
    getters:{
        users(state){
            return state.users
        }
    },
    mutations:{
        changeUsers(state,payload){
            state.users=payload
        }
    },
    actions:{
        CHANHE_USERS({commit},payload){
            commit('changeUsers',payload)
        }
    }
}
 

2、把子模組的js檔案匯入到vuex的js主檔案（假設為index.js）中，在index.js檔案中匯入模組檔案，其中對模組檔案的命名作為createNamespacedHelpers 的訪問入口，在vuex物件中新增modules物件，在modules中註冊子模組

import Vue from 'vue'
import Vuex from 'vuex'
import rules from './modules/rules'
import users from './modules/users'

Vue.use(Vuex)

export default new Vuex.Store({
//註冊vuex模組
    modules:{
        rules,
        users
    }
})
 

3、在vue檔案中訪問

<script>
import {mapActions,mapGetters,createNamespacedHelpers} from 'vuex'
//使用createNamespacedHelpers 需要在模組中新增namespaced:true屬性，其中引數的js檔案匯入時的模組名
const users=createNamespacedHelpers('users')
const rules=createNamespacedHelpers('rules')
    export default {
        methods:{
            ...mapActions(['CHUANGE_NUM']),
            // ...users.mapActions()
        },
        computed:{
            ...mapGetters(['c','d']),
            ...users.mapGetters(['users']),
            ...rules.mapGetters(['admin'])
        }
    }
</script>