组件间通信 ---（vuex的几种简写形式）补充

根据上一节vuex的讲解在页面上写的太麻烦了，其实有很多种简写的方式，我们第一想到得就是用计算属性来写，如下：

<template>
  <div>
      <h1>我是A组件vuex里面的数据是：{
  {totnumber}}---<button @click="addnum">点击我vuex仓库里面会变成999</button></h1>
      <h1>我是A组件，经过计算扩大10倍是{
  {changestatedata}}</h1>
  </div>
</template>

<script>
export default {
    computed:{
        totnumber(){
            return this.$store.state.dataVal.totnumber
        },
        changestatedata(){
            return this.$store.getters["dataVal/changestatedata"]
        }
    },
  methods: {
      addnum(){
          this.$store.dispatch('dataVal/addnum',999)
      }
  },
}
</script>

页面也一样可以正常展示，

在我们vuex也提供了相应得api来简化这种写法，还需要解构写法来进行，我们先来看第一个api：mapState  就是映射vuex里面得state值，因为它本身是一个对象，然后对象里面是函数，就是这种形式