前言：最近在做一個vue的項目悦即，碰到一點關(guān)于mapMutations傳參的問題斤斧，解決完問題了所以寫一下對它理解厚宰。
1到踏、官網(wǎng)中的提交載荷（傳參）具體到一般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輔助函數(shù)的傳參
- 新建一個store.js文件
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//定義state智绸，并將listName設(shè)置為一個空對象
const state = {
listName: {}
}
//定義mutations，可以傳參砸紊，用于設(shè)置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數(shù)據(jù)（狀態(tài)）
要點： 要寫在methods下面醉顽，因為mapActions/mapMutations只是把action/mutation函數(shù)綁定到你的methods里了;你調(diào)methods里的方法的時候照常傳參就可以了。
//App.vue
import {mapMutations} from 'vuex'
export default {
//定義一個listName平挑，作為下面的mapMutations的傳參參數(shù)游添，修改state的listName
data() {
listName: {
name:'Ewall',
age:'21'
}
},
created (){
//調(diào)用set_listname方法，將listName對象作為參數(shù)傳入
this.set_listname(listName)
},
methods: {
...mapMutations(['set_listname'])
}
}
- 再定義一個子組件通熄，獲取state對象里面的數(shù)據(jù)
//app-child.vue
import {mapGetters} from 'vuex'
export default {
computed: {
//獲取state里面的listName對象
...mapGetters(['get_listname'])
},
created() {
//打印下獲得數(shù)據(jù)結(jié)果
console.log(this.get_listname)
}
}
參考學(xué)習(xí)：
https://vuex.vuejs.org/zh-cn/mutations.html
