vuex入门(2)-辅助函数mapState和mapMutations

在上一篇文章中，我们介绍了vuex的基本概念和使用方法
当需要共享的数据比较简单且都是同步操作时，组件可以跳过Action，直接用 commit 方法调用Mutations
同时我们也可以借助两个辅助函数简化我们的代码
mapState和mapMutations可以接收数组或者对象作为参数
将store中的状态映射到当前组件

一、mapState

获取store中city变量的一般写法为：

{{this.$store.state.city}}

我们可以在组件中引入mapState，将state映射到当前组件，简化代码：

<script>
import { mapState } from 'vuex'
export default {
  name: ' ',
  computed: {
    ...mapState({
      // 将state中的city映射到当前组件中的currentCity
      currentCity: 'city'
    })
  }
}
</script>

在这种情况下，获取city变量就可以这么写：

{{this.currentCity}}

二、mapMutations

组件通过commit方法调用mutation的一般写法：

{{this.$store.commit('changeCity', city)}}

同理，我们可以引入mapMutations，简化代码：

<script>
import { mapMutations } from 'vuex'
export default {
  name: ' ',
  methods: {
    handleCityClick (city) {
      this.changeCity(city)
    },
    // 将 state中的 changeCity映射到当前组件
    ...mapMutations(['changeCity'])
  }
}
</script>