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

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

棒棒团公益免费性质，欢迎加阳叔WX：erdaori 拉你入群

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: '',

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)

}

}