基本的项目使用基础的vuex就行,要是模块比较多,业务场景比较大的项目,要是都写在一个store里面比较多,处理比较复杂,使用和维护起来比较臃肿。这种情况就要使用到了vuex的Module了,每一个模块是一个Module。这样使用和维护起来都比较方便。使用方法如下:
在src下建立store文件夹,创建如下文件
在index.js代码如下:
import Vue from "Vue"
import Vuex from "Vuex"
import a from "./modules/a";
import b from "./modules/b"
Vue.use(Vuex)
const store = new Vuex.store({
state: {},
actions: {},
mutations: {},
getters: {},
modules: {
a,
b
}
})
export default store;
a.js
const state = {
count: 1
}
const mutations = {
aAdd(state, data) {
state.count = data
}
}
const actions = {
actionsAAdd({ state, commit }, data) {
commit('aAdd', data)
}
}
export default {
namespaced: true, // 命名空间,防止各个moudle的命名重复
state,
mutations,
actions,
}
b.js
const state = {
count: 1
}
const mutations = {
aBdd(state, data) {
state.count = data
}
}
const actions = {
actionsBAdd({ state, commit }, data) {
commit('aBdd', data)
}
}
export default {
namespaced: true, // 命名空间,防止各个moudle的命名重复
state,
mutations,
actions,
}
在vue页面引用
<template>
<div>
{{ countA }} {{ countB }}
</div>
</template>
<script>
export default {
data(){
a:0,
b:0
},
computed:{
...mapState({
countA:state=>state.a.count
countB:state=>state.b.count
})
},
cteated(){
this.$store.commit('a/aAdd',10)
this.$store.commit('b/aBdd',20)
this.$store.dispatch('a/actionsAAdd',10)
this.$store.dispatch('b/actionsBAdd',10)
},
methods:{
}
}
</script>