vuex 五种属性State、Getter、Mutation、Action、Module

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。它被设计用来管理应用程序中的各种组件之间共享的状态，使得状态的管理变得更加简单和可预测。

Vuex 中有五种核心属性：State、Getter、Mutation、Action、Module。

• State: State 是存储 Vuex 状态的单一状态树。它是应用程序中的唯一数据源，类似于组件中的数据属性。State 的值可以通过 this.$store.state 访问。（类似于data）

• Getter: Getter 可以看作是 store 的计算属性。它允许你在不改变 state 的情况下派生出一些新的状态，类似于 Vue 组件中的计算属性。Getter 的值可以通过 this.$store.getters 访问。（类似于计算属性computed）

• Mutation: Mutation 是唯一修改 store 中状态的方式。每个 mutation 都有一个字符串类型的事件类型 (type) 和 一个回调函数 (handler)。Mutation 必须是同步函数。Mutation 的调用方法是通过 store.commit('mutationName')。（类似于method方法，同步的）

• Action: Action 类似于 mutation，不同之处在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。Action 的调用方法是通过 store.dispatch('actionName')。（方法都写在mutation中，action是提交mutation并作异步处理）

• Module: Module 允许将 store 分割成模块，每个模块都有自己的 state、getter、mutation、action。这样可以更好地组织大型的应用程序，使代码更易于维护和扩展。

下面是一个简单的示例，演示了如何在 Vuex 中使用这些属性：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  }
});

export default store;

在这个示例中，我们定义了一个 Vuex store，包含了 state、getter、mutation、action。state 中包含了一个名为 count 的状态；getter 中定义了一个名为 doubleCount 的派生状态，计算了 count 的两倍；mutation 中定义了一个名为 increment 的 mutation，用于增加 count 的值；action 中定义了一个名为 asyncIncrement 的 action，用于异步增加 count 的值。

然后，在 Vue 组件中使用这些属性：

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="asyncIncrement">Async Increment</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment', 'asyncIncrement'])
  }
};
</script>

在这个组件中，我们使用 mapState 来映射 count 状态，mapGetters 来映射 doubleCount 派生状态，mapActions 来映射 increment 和 asyncIncrement 方法。这样我们就可以在组件中直接访问 Vuex 中的状态和方法。