浅谈vuex之mutation和action的基本使用

概述

Vuex是状态管理库，它可以让我们更好地管理应用程序状态。Vuex提供了许多有用的功能，其中最常使用的功能是mutation和action。mutation负责更改vuex的状态，而action则用于组织和分发mutation。本篇文章将会简单介绍mutation和action的基本使用。

Mutation

mutation是用来更改vuex状态的函数。它必须是同步函数，异步函数可能会导致vuex状态不一致。mutation会接收当前状态(state)作为第一个参数，可以接受其他参数作为payload(负载)，payload是用来表示要更改的状态的对象。在mutation中，我们定义状态的变化逻辑，例如增加、减少等。

下面是一个简单的示例，它展示了如何更改store中的count状态：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  }
});

在上面的代码中，state对象包含了所有的应用程序状态，我们使用mutation来更改count的值。我们定义了两个mutation，分别是increment和decrement，它们对应着count值的增加和减少。在mutation中，我们使用state来获取当前状态，并且更改状态的值。

Action

action用于组织和分发mutation。action与mutation的区别在于：mutation是同步函数，而action则可以是异步函数。action可以包含任意异步操作，例如从服务器获取数据等。一般情况下，我们会在action中调用mutation来更改状态。

下面是一个简单的示例，它展示了如何调用mutation来更改count的值：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

在上面的代码中，我们定义了一个名为incrementAsync的action。它接收一个context对象作为参数，context中包含了store中的state、commit、dispatch等属性和方法。其中，commit方法用于调用mutation。在上面的代码中，我们使用setTimeout函数模拟了一个异步操作，一秒钟后调用increment方法来更改count的值。

当我们需要调用incrementAsync方法时，只需要在组件中使用dispatch方法来分发action。

this.$store.dispatch('incrementAsync');

在上述代码中，使用了dispatch方法分发了incrementAsync。Vuex会根据传入的名称自动查找对应的action。

总结

通过本篇文章的讲解，我们了解了vuex中mutation和action的基本使用。mutation用于更改状态，而action则用于组织和分发mutation。我们可以在mutation中定义状态的变化逻辑，在action中调用mutation来更改状态。在组件中，我们可以使用commit方法来调用mutation，使用dispatch方法来分发action。