vue——vuex模块化操作

当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>

4、包含命名空间的函数调用

$store.state.b.count

$store.commit('b/addcount')