我对vuex的理解（二） 之 mapGetters取值和mapMutations的传参

前言：最近在做一个vue的项目，碰到一点关于mapMutations传参的问题，解决完问题了所以写一下对它理解。

1、官网中的提交载荷（传参）具体到一般demo中大概是这样的

const store new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state,n){
            state.count += n
        }
    }
})new Vue({
    el:"#app",
    store,
    computed: {
        count() {           return store.state.count
        }
    },
    methods: {
        add() {           //传参
           store.commit('increment',10) 
        }
    }
})

2、具体到项目中，用mapMutations辅助函数的传参

• 新建一个store.js文件

//store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)//定义state，并将listName设置为一个空对象const state = {    listName: {}
}//定义mutations，可以传参，用于设置state里的listNameconst mutations = {    set_listname: (state,value) => {
        state.listName=value
    }
}//定义getters，用于获取出state里的对象const getters = {    get_listname: state => {        return state.listName
    }
}export default new Vuex.Store({
    getters,
    state,
    mutations
})

• 在vue实例中注册store

//main.jsimport Vue from 'vue'import App from './App'import store from './store'/* eslint-disable no-new */new Vue({  el: '#app',
  router,
  store,  template: '<App/>',  components: { App }
})

• 在App.vue组件中使用mapMutations传参，修改state数据（状态）
  要点： 要写在methods下面，因为mapActions/mapMutations只是把action/mutation函数绑定到你的methods里了;你调methods里的方法的时候照常传参就可以了。

//App.vueimport {mapMutations} from 'vuex'export default {  //定义一个listName，作为下面的mapMutations的传参参数，修改state的listName
  data() {    listName: {      name:'Ewall',      age:'21'
    }
  },
  created (){    //调用set_listname方法，将listName对象作为参数传入
    this.set_listname(listName)
  },  methods: {
    ...mapMutations(['set_listname'])
  },
  
}

• 再定义一个子组件，获取state对象里面的数据

//app-child.vue
 import {mapGetters} from 'vuex'

  export default {      computed: {      //获取state里面的listName对象
          ...mapGetters(['get_listname'])
      },
      created() {      //打印下获得数据结果
          console.log(this.get_listname)
      }
  }

作者：Ewall_
链接：https://www.jianshu.com/p/506da488d2a1