一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第七天，点击查看活动详情。
前言
在上篇文章中我们讲解了如何利用Vuex的state和mutations以及actions进行集中状态的管理，本文我们将继续进行Vuex的讲解。
基本使用
1.getters的使用
概念：
我们知道Vue组件实例对象中有data和computed属性，computed通常依赖于data属性中的值进行计算。而getters也类似于computed，这时state也可类比为data。所以我们便可以得出概念就是当state中的数据需要经过加工后再使用时，可以使用getters加工。
运用：
我们继续上次的案例进行练习，brother1组件有一个游戏列表，brother2中有一个人员列表，因为数量一致。我们现在有这样一个需求：将brother2的人员列表与brother1的游戏列表一一对应合成一个字符串，再在中间加一个“玩”字。例如：张三玩英雄联盟。下图是一开始的模板。
那么，我们首先在Vuex（store文件夹下的index.js）添加一个getters配置项。然后在此配置项下添加一个参数作为组合后的值（就像computed计算属性值一样）再进行操作。
store下的index.js：
const state= {
gameList: ["英雄联盟", "绝地求生", "永劫无间", "Dread Hunger"],
peopleList: [
"张三", "李四", "王五", "陆六"
]
}
const getters= {
combineValue(state){
var a=[]
state.gameList.forEach((element,index,array) => {
console.log(state.peopleList[index]+"玩"+element)
return a.push(state.peopleList[index] + "玩" + element)
})
return a;
}
}
然后在brother1组件中利用列表展示一下
brother1.vue:
<h3>这是与brother2组合后的值</h3>
<ul>
<li v-for="(item, index) in $store.getters.combineValue" :key="index">{{ item }}</li>
</ul>
效果
总结
以上就是对于Vuex中的getters配置项的用法，希望能够通过这个小案例让大家加深对于其的理解，我们下期再见！
