vuex辅助函数的使用

vuex是vue的公共状态管理，vuex核心的概念有五个，state,mutation,action,getter,module.

• state 记录存储公共的状态。
• mutation 事件改变state中的状态，第一个参数是state。
• action 处理异步的事件。
• getter 类似于计算属性。
• module 暂时没用过。
  通常使用state，或者mutation都需要this.$store.state或者this.$store.commit来使用，但是有时候调用太多的状态，这样使用还是有些麻烦，所以可以借助vuex的辅助函数来解决这个问题。
  通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了。
  使用时需要在组建内引入

注意事项，映射的名称不要和当前组件的data，methods名称发生冲突，否则会被覆盖。

import {mapState,mapMutations,mapActions,mapGetters} from "vuex"

• state的辅助函数需要映射到计算属性中computed，映射的名称一定要相同，然后就可以通过this访问到state。

  computed:{
        ...mapState(["name"]),//name和vuex中的state保持一至。
    },
methods：{
  click(){
    console.log(this.name)//访问到vuex的name
  }
}

• mutation的辅助函数mapMutations把mutations里面的方法映射到methods中。映射的名称一定要相同，然后就可以通过this调用mutaition的方法。

 mutations: {
    show(state){
      console.log(state)
    }
  },


 methods:{
        ...mapMutations(["show"]),
        click(){
            this.show()
        },
}

• mapAcions：把actions里面的方法映射到methods中
• mapGetters:把getters属性映射到computed身上