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

灰太狼 2021-04-24 06:51 560阅读 0赞

前言：最近在做一个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.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    //定义state，并将listName设置为一个空对象
    const state = {
        listName: {}
    }
    //定义mutations，可以传参，用于设置state里的listName
    const 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.js
    import 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.vue
    import {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)
          }
      }