1.modules的作用
vuex使用的是单一状态树管理,如果将所有的状态集中在一个对象管理时,当应用复杂时,store对象将会变得很臃肿。modules属性就是让我们能根据需求分割成不同的模块去管理,里面也有state,actions,getters和mutations这些属性
2.modules的写法与其他属性的对比
2-1.state属性
1.不同点
要获取模块里面的数据,需要指定是哪个模块里面 的数据。
2.代码展示
Home.vue页面
<template>
<div class="home">
<h1>这是home页面</h1>
<p>展示modules里面数据:{{$store.state.a.name}}</p>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
}
}
</script>
vuex的index.js页面
import { createStore } from 'vuex'
const moduleA = {
state: {
name: 'moduletest'
},
getters: {
},
mutations: {
},
actions: {
}
}
export default createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
a: moduleA,
}
})
3.过程分解
2-2.getters属性
1.不同点
与根路径下的getters不同的是,模块下的getters默认带四个参数
state(局部的),getters,rootState,rootGetters,其中getters和rootGetters都可以获取所有getters(模块和根里面)的方法,所以一般使用的话前三个参数即可满足需求
2.代码展示
Home.vue
<template>
<div class="home">
<h1>这是home页面</h1>
<p>展示modules里面数据:{{$store.getters.fullname}}</p>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
}
}
</script>
vuex的index.js
import { createStore } from 'vuex'
const moduleA = {
state: {
name: 'moduletest'
},
getters: {
test1(state) {
return state.name + 12;
},
fullname(state, getters, rootState) {
return state.name + rootState.count + getters.test1 + getters.test2;
}
},
mutations: {
},
actions: {
}
}
export default createStore({
state: {
count: 2
},
getters: {
test2(state) {
return state.count * 2;
}
},
mutations: {
},
actions: {
},
modules: {
a: moduleA,
}
})
3.过程分解
2-3.mutations属性
1.不同点
此时默认参数state只是局部变量,无法获取根的state里面的数据
2.代码展示
Home.vue
<template>
<div class="home">
<h1>这是home页面</h1>
<p>展示modules里面数据:{{$store.state.a.name}}</p>
<button @click='test'>模块修改</button>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
test() {
this.$store.commit('updateName');
}
}
}
</script>
vuex里面的index.js
import { createStore } from 'vuex'
const moduleA = {
state: {
name: 'moduletest'
},
getters: {
},
mutations: {
updateName(state) {
state.name = 'change'
}
},
actions: {
}
}
export default createStore({
state: {
count: 2
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
a: moduleA,
}
})
3.代码分解
2-4.actions属性
1.不同点
默认参数context变得比较复杂,不再单单的指store对象。通过他可以获取模块和根里面所要的所有东西。
- context.state:局部的
- context.rootState;根的
- context.Getters:局部的
- context.rootGetters:根的
- dispatch:局部的,如果要访问根的,加一个参数{root:true},示例:dispatch(‘someOtherAction’,
null, { root: true }),没负载写null - commit:局部的。如果要访问根的,也是加一个参数{root:true},示例:commit(‘someMutation’, null,
{ root: true }),没负载写null