手把手教你使用Vuex（二）

　　在上一篇文章Vuex（一）中我们已经把Vuex需要用到的属性的单独页面引入到了store/index.js里面，所以我们接下来直接在这些js文件中写自己需要的代码就好。　　

　　

　　

1.Getter

　　了解：Getter我们可以理解为store仓库的一个计算属性，就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，依赖值发生改变才会被重新计算，它的作用主要是用来派生出一些新的状态。　

　　使用：　　

　　　　

　　　  1️⃣  在getters.js中写出处理全局变量的代码，这里的变量用的还是上一章写的count

　　　　敲黑板！！！

　　　　　　Getter的参数可以是state，这时Getter会暴露为store.getters对象，所以我我们可以直接以属性的形式访问这些值（store.变量）

　　　　　　Getter的参数也可以是getter，这时我们可以调用getter中其他的处理方法（例如：store.getters.changeCount.length）

　　　　　　Getter的参数还可以是自己定义的参数，我们在调用时跟调用带参函数一样调用就可以了(store.getters.changeCount(参数))

　　　　　　如果没有自定义参数，访问时是不需要写括号的，也就是通过属性访问，这个时候getter是作为响应式系统的一部分缓存在里面，如果有自定义参数，访问时需要带括号，也就是通过方法访问，这个时候每次都会调用getter，而不会缓存结果。

　　　　

　　　　2️⃣  在template和方法中调用getters中的方法

　　　　

　　　　　3️⃣  输出结果

　　　　

　　　　我们可以看到直接用this调用store的话，内容稍微长了点，如果页面中有多处调用的话，也不利于修改，看着还复杂，所以我们可以用到computed计算属性来接收并使用它：　　

　　　　

　　　　

　　　　这样，我们如果需要修改调用的方法的话，可以直接在computed中修改一次就可以了。

　　　虽然看起来上面的调用方法已经很方便了，但其实vuex中提供了更简单的获取方法　　

　　　　

　　　　mapGetters辅助函数：

　　　　mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

　　　　简单的说就是用展开符展开getters中的所有的方法，将getter混入computed对象中，调用需要的getters中的方法，映射为`this.$store.getters.changeCount`　

　　　　使用：　　　　

　　　　　　① 引入mapGetters

　　　　 　  ② 在computed中取用

　　　　　　③ 在template中调用

　　　　　　如果想将一个getter属性另取一个名字，使用对象形式：

　　　　　　

　　　　　这个辅助函数除了mapGetters还有mapState,mapMutations,mapActions，他们的用法都大致相同

　　　　　

　　　　　vuex系列：

　　　　　　手把手教你使用Vuex（一）

　　　　　　手把手教你使用Vuex（二）

　　　　　　手把手教你使用Vuex（三）

　　　　　　手把手教你使用Vuex（四）

　　　　　深入vuex戳这里