辅助函数

• computed {...mapState(['stateName'])}
• methods {...mapMutations(['methodName'])}

import { mapState, mapMutations } from "vuex";
export default {
    methods: {
      ...mapMutations(["setCurIndex"]),
      //  // 使用方式：this.$store.commit('方法名', 参数1, 参数2....)
      // 当一个参数时 不需要 {} ,多个参数使用 payLoad
      this.$store.commit('setCurIndex',{ index , contx})
      /*
           mutations: {
              setCurIndex(state,payload){
                const {index, contx} = payload
                state.curIndex = index
              }
            },
      */
    },
    computed: {
      ...mapState(["curIndex"]),
    },
 } 

mapState(namespace?: string, map: Array<string> | Object): Object

为组件创建计算属性以返回 Vuex store 中的状态。第一个参数是可选的，可以是一个命名空间字符串

mapGetters(namespace?: string, map: Array<string> | Object): Object

为组件创建计算属性以返回 getter 的返回值。第一个参数是可选的，可以是一个命名空间字符串

mapActions(namespace?: string, map: Array<string> | Object): Object

创建组件方法分发 action。第一个参数是可选的，可以是一个命名空间字符串

mapMutations(namespace?: string, map: Array<string> | Object): Object

创建组件方法提交 mutation。第一个参数是可选的，可以是一个命名空间字符串

mapGetters 辅助函数

// vuex
export default new Vuex.Store({
  state: {
    curIndex: 0
  },
  mutations: {
    setCurIndex(state, index) {
      state.curIndex = index
    }
  },
  actions: {},
  getters: {
    // 固定格式,对state 进行进一步加工,相当于拦截加工一下
    getCurIndex(state) {
      return `当前index 为 ${state.curIndex} 角标!`
    }
  },
  modules: {}
})

<template>
  <div class="getter">
    {{ getCount }}
    <button @click="add">ADD State</button>
  </div>
</template>
 
<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapGetters(['getCount'])
  },
  methods: {
    add () {
      this.$store.commit('add')
    }
  }
}
</script>

mapState的使用（常用）

 
//1.在.vue组件中引入,在js块中引入

import { mapState } from 'vuex'
//2.在.vue组件中定义一个对象

computed：{
...mapState([        //mapState本是一个函数，在里面写一个数组，记得加...
‘num’ ， //存的数据
‘id’
])
}
//3.然后就可以不用$store.state.num引用了,直接插值

{{num}}{{id}}   //引用多个
 
 
//4. 解构赋值实例
let mapState = {num:0,id:111}
let computed = {...mapState}
console.log(computed )

mapMutations