我對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.js import Vue from vue import Vuex from vuexVue.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) } }

參考： https://vuex.vuejs.org/zh-cn/mutations.html

推薦閱讀：