接上篇《25.Vuex介绍和实例演示》
上一篇我们对vuex的基础和部分核心属性进行了介绍，本篇继续介绍vuex的其他重要属性，以及这些属性的实际应用。
本系列博文使用的Vue版本：2.6.11
vuex官方网站：https://vuex.vuejs.org/zh/
上一篇介绍了State和Mutation，本篇继续来说Getter、Action和Module。
一、Getter
官方网站对Getter的定义是store的计算属性，Getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
直白一点来说就是，Getter允许我们在改变数据的时候，做一些操作。
什么叫改变数据的时候做一些操作呢？例如state中有一个数据列表list，有时候我们需要根据条件过滤list，形成一个新的结果集以供用户查看，而这种处理结果多个组件之间可能都要使用，定义一个过滤函数，复制它到每一个组件，或者抽取到一个共享函数然后在每个组件导入它，都不是太理想。
这里我们使用getter这个共享状态处理对象，可以在任意组件直接调用它，在getter中定义的方法中的计算逻辑，会根据state中的值的变化而动态变化，简直不要太方便。这里我们写一个实例来让大家理解一下getter。
我们修改一下上一篇编写的store.js，增加一个Getter：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/**1.state在vuex中主要用于存储数据 */
var state={
count:1
}
/**2.mutations里面放的是方法，主要用于改变state里面的数据 */
var mutations={
incCount(){
++state.count;
}
}
//定义Getter计算属性，改变state里面的count数据的时候，会触发getter里面的方法，获取新的值
var getters = {
computedCount:(state,getters) => {
return state.count*2;
}
}
//3.定义store
const store = new Vuex.Store({
state,
mutations:mutations,
getters
})
//4.暴露store
export default store;这里我们在getters里定义了一个getter，当上面state值改变的时候（mutation中的incCount方法一执行），就会触发getter的方法，这里的computedCount就会返回当前state中count最新的值乘以2的结果。然后我们在HelloWorld.vue中调用getter的方法，获取其计算的state中count最新的值乘以2的结果：
<template>
<div id="app">
首页<br/>
State中的值【Count】：{
{this.$store.state.count}} -- {
{this.$store.gatters.computedCount}}
<br/>
<button @click="incCount()">增加数量</button>
<router-view/>
</div>
</template>
<script>
import store from '../vuex/store.js'
export default {
name: 'app',
data () {
return {
msg: '你好，vue'
}
},
store,//这里如果store是其他名字，要写成store: store1
methods:{
incCount(){
//改变vuex store里面的数据
this.$store.commit('incCount');//触发mutations定义的方法
}
}
}
</script>
<style>
</style>注意，上面的“{
{this.$store.gatters.computedCount}}”就是获取getter里的方法。效果：
可以看到，随着count的变化，相应的getter也被触发并更新的新的计算值。
总结一下，getter常用在state属性值动态计算结果且任意组件可直接获取的场景。
二、Action
根据官网介绍，Action类似于Mutation，他们的不同之处在于：
●Action提交的是Mutation，而不是直接变更状态
●Action可以包含任何异步操作。
说白了Action就是可以直接的操作Mutation，间接的改变State中的属性值，然后可以异步操作。这个属性很少使用到，这里简单介绍一下。我们编写实例来使用一下Action，在Store.js里继续定义action：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/**1.state在vuex中主要用于存储数据 */
var state={
count:1
}
/**2.mutations里面放的是方法，主要用于改变state里面的数据 */
var mutations={
incCount(){
++state.count;
}
}
//定义Getter计算属性，改变state里面的count数据的时候，会触发getter里面的方法，获取新的值
var getters = {
computedCount:(state,getters) => {
return state.count*2;
}
}
//定义Action，用来异步操作Mutation
var actions={
incMutationsCount(context){//这里的context是一个与store实例具有相同方法和属性的对象
context.commit('incCount');//调用context.commit提交一个Mutation方法
}
}
//3.定义store
const store = new Vuex.Store({
state,
mutations:mutations,
getters,
actions
})
//4.暴露store
export default store;上面的Action函数的context参数，是一个与store实例具有相同方法和属性的对象，可以调用 context.commit提交一个mutation，或者通过context.state和context.getters来获取state 和getters。
然后在外部通过“dispatch”来触发action的方法：
this.$store.dispatch('incMutationsCount');这里我们就不再做测试了，大家理解即可。
总结一下，Action常用在需要异步调用Mutation的方法时使用的。
三、Module
当我们把vue项目的所有状态全部维护至一个store对象中时，就可能导致store对象变得相当臃肿，为了解决以上问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter甚至是嵌套子模块——从上至下进行同样方式的分割，例如：
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态这里面每个子模块调用的state默认都是自己本模块的state，如果getter需要调用根state和getter，在参数里添加rootState、rootGetters即可，同时action中可以通过context.rootState、context.rootGetters获取根的state和getter。
剩下的“命名空间”、“模块动态注册”和“模块重用”大家可以前往官网https://vuex.vuejs.org/zh/guide/modules.html详细学习，这里不再赘述。
四、总结
Vuex解决了vue中不同组件之间的数据共享，以及数据持久化的问题。
以上就是vue以及vuex的全部内容，至此vue的基础学习全部结束。请关注后续的vue项目实战的新专栏博文，感谢支持！
参考：
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》
转载请注明出处：https://blog.csdn.net/acmman/article/details/113814823