说明
vuex
主要用来进行统一状态管理。随着项目的增大,vuex
中的js
文件会变得越来越大,越来越冗余,代码的可维护性自然也就变得很差。
所以这个时候就需要进行vuex
的分层。
store拆分
可以在项目创建的初期,在store
目录中分别创建state.js
、actions.js
、mutations.js
、getters.js
文件。
然后在store
目录下的index.js
中将其他js文件引入。
如下:
// store/index.js
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
const store = new Vuex.Store({
state,
getters,
mutations,
actions
});
通过modules来进行拆分
除了上述的这种拆分的方式,还可以通过modules
来进行拆分。
例如:
// store/demo/index.js
const Demo = {
state() {
return {
a: 100,
b: 200
}
},
actions: {
sayHello() {
console.log('this is demo actions')
}
}
}
export default Demo
// store/index.js
import Demo from "./demo/index"
...
modules: {
demo: Demo
}
...
需要注意的是,想要取得demo中的a和b,需要采用
this.$store.state.demo.a
这种写法。
方法则比较简单,this.$store.dispatch('sayHello')
。