Vuex的初探与实战小结

}
}
}
</script>

结果完全一样，我们可以根据this.$store.getters.属性名来获取getters，也可以通过

mapGetters

辅助函数将 store 中的 getter 映射到局部计算属性： 

具体实现方式如下：

<template>
 <div class="index">
  {{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来实现。具体实现如下：