vuex中的mapState, mapActions, mapMutations用法簡介

對於vuex狀態管理，這里說下個人見解，vuex大概就是根據需求定義一些全局變量，但是我們必須通過store去訪問和修改它。

我們可以把vuex分為state，getter，mutation，action四個模塊，通俗的講一下四個模塊的作用：

state：定義變量；

getters：獲取變量；

mutations：同步執行對變量進行的操作；

actions：異步執行對變量進行的操作；

下面定義了一個store模塊log.js：

const state = {
  logs: []
}

const getters = {
　logsGetter: (state) => {
　　return state.logs
　}
}

const mutations = {
  ADD_ERROR_LOG: (state, log) => {
    state.logs.push(log)
  }
}

const actions = {
  addErrorLog({ commit }, log) {
    commit('ADD_ERROR_LOG', log)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

那么我們怎么去用它們呢？首先我們來看代碼:

<script>
import { mapstate, mapActions, mapMutations } from 'vuex'
export default {
  computed: {
    // 對象形式
    // ...mapstate({
    //   logs: state => state.logs
    // })
    //數組形式
    ...mapstate([
      // 需要和state中定義的變量相同
      'logs'
    ])
  },
  methods: {
    // 對象形式
    // ...mapActions({
    //   'addErrorLog': 'addErrorLog'
    // })
    // 數組形式
    ...mapActions([
      'addErrorLog'
    ]),
    // 對象形式
    // ...mapMutations({
    //   'ADD_ERROR_LOG': 'ADD_ERROR_LOG'
    // })
    // 數組形式
    ...mapMutations([
      'ADD_ERROR_LOG'
    ])
  }
}
</script>

我們分別獲取到了logs，addErrorLog，ADD_ERROR_LOG，只需要通過如this.logs這樣的形式去調用即可。