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

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这样的形式去调用即可。