黑马程序员技术交流社区

标题: [上海校区] vue——vuex模块化操作 [打印本页]

---

作者: 叶夜葉    时间: 2019-8-8 13:29
标题: [上海校区] vue——vuex模块化操作


[上海前端] vue——vuex模块化操作
转载自：https://blog.csdn.net/YUHUI01/article/details/84206956

当state信息足够庞大时，需要使用模块化把state数据分开管理

1、新建js文件，导出一个对象，对象中包含vuex的参数（state、getters、mutations、actions等），在对象中要包含 namespaced:true 属性，设置带命名空间以进行数据访问。

[JavaScript] 纯文本查看 复制代码

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中注册子模块

[JavaScript] 纯文本查看 复制代码

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文件中访问

[JavaScript] 纯文本查看 复制代码

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'])



        }



    }

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2