[ 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
以上是 [ vue ] 解耦vuex(按照组件来组织vuex的结构) 的全部内容, 来源链接: utcz.com/z/376646.html