正文
[ vue ] 解耦vuex（按照组件来组织vuex的结构）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
问题描述
随着应用复杂度的增加，vuex用一个 store/index.js 文件来描述已经很难维护了，我们想把这些状态分割到单独文件里面。
参考1：https://vuex.vuejs.org/zh/guide/structure.html
参考2：https://github.com/PanJiaChen/vue-element-admin
[ 最终项目结构 ]
E:.
│
├─components
│ article.vue
│ header.vue
│ sidebar.vue
│ ...
│
├─router
│ index.js
│
├─store
│ index.js
│
└─ modules
article.js
header.js
sidebar.js
解决方案
1. article.js / header.js / sidebar.js
注意开启了namespaced，在取的state的时候要这样写： this.$store.state.article.msg
const state = {
msg:''
}
const mutations = {
CHANGE_MSG:(state,val)=>{
state.msg = val
}
}
const actions = {
change_msg(context,val){
context.commit('CHANGE_msg',val)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
2. index.js
1. 注意mymodules的构成
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const mymodules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {}) /**
mymodules:{
article:{
namespaced:true,
state:{},
...
},
header:{
namespaced:true,
state:{},
...
}
}
*/
console.log(mymodules)
const store = new Vuex.Store({
modules:mymodules
}) export default store
