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

最新推荐文章于 2024-11-25 09:48:46 发布

转载最新推荐文章于 2024-11-25 09:48:46 发布 · 517 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lsboom/p/11385433.html

本文介绍了Vuex状态管理的基本概念及使用方法，包括state、getters、mutations和actions四个核心模块，并通过具体示例展示了如何利用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>