<template> <div> {{count}} <br> {{filterNumbers.join()}} <br> {{antherNumbers.join()}} </div> </template> <script> import {mapState,mapGetters} from 'vuex' export default { name: "index", computed:{ ...mapState(['count']),6 ...mapGetters(['filterNumbers']), ...mapGetters({ antherNumbers:'filterNumbers' }) } } </script>
如果用同一名字直接把数组作为参数，如果想改一个名字，可以传入一个对象作为参数，结果如下：
4.3.mutation
在组件内，来自store的数据只能读取，不能手动改变，改变store中数据唯一的途径就是显示的提交mutations。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。改变代码如下：
// store/index.js mutations: { add(state){ state.count++; } }, // Index组件 ** <button @click="add">+</button> ** methods:{ add(){ this.$store.commit('add'); console.log(this.count); } **
连续点击5次增加按钮，发现count的值也改变了。当然，我们也可以传参进去
// store/index.js mutations: { add(state,n){ state.count+=n; } }, // Index组件 ** <button @click="add">+</button> ** methods:{ add(){ this.$store.commit('add'，10); console.log(this.count); } **
触发方法语句为：this.$store.commit(方法名);也可以使用辅助函数mapMutations代替：
methods:{ ...mapMutations(['add']), }
4.4.action
前面我们讲过，mutation有必须同步执行这个限制，我们在业务需求中有时候需要在获取ajax请求数据之后再操作或定时器操作数据，这些都属于异步请求，要用actions来实现。具体实现如下：
// store/index.js mutations: { changeCount(state){ state.count=3000; }, }, actions: { changeCount3000s(context){ setTimeout(()=>{ context.commit('changeCount') },3000) // Index组件 <button @click="changeCount3000s">点击按钮3s后count的值改变</button> methods:{ ...mapMutations(['add']), changeCount3000s(){ this.$store.dispatch('changeCount3000s'); } }
我们在点击按钮3s后count的值改变为3000，我们可以通过this.$store.dispatch(方法名)来触发事件，也可以通过辅助函数mapActions来触发。
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' methods:{ ...mapMutations(['add']), ...mapActions(['changeCount3000s']) }
学会以上几个属性的使用基本就可以满足平时业务中的需求了，但使用Vuex会有一定的门槛和复杂性，它的主要使用场景是大型单页面应用，如果你的项目不是很复杂，用一个bus也可以实现数据的共享，但是它在数据管理，维护，还只是一个简单的组件，而Vuex可以更优雅高效地完成状态管理，所以，是否使用Vuex取决于你的团队和技术储备。
参考资料：
《Vue.js实践》 Vuex