我對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

//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)
      }
  }

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