本帖最后由 叶夜葉 于 2019-8-9 14:16 编辑
[上海前端] 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'])
}
}
| 
收藏
淘帖
踩
