Vue全家桶 - Vuex的理解和学习

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以可预测的方式进行状态变化。

Vuex 的核心概念包括：

1. State：单一状态树，用一个对象就能包含全部应用的状态。
2. Getters：从 State 生成的数据。
3. Mutations：同步函数，用于更改 State 中的数据。
4. Actions：异步函数，用于提交 Mutations，可以包含任何异步操作。
5. Modules：将 Store 分割成模块，每个模块拥有自己的 State、Getters、Mutations、Actions 和嵌套子模块。

以下是一个简单的 Vuex 示例：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    decrement({ commit }) {
      commit('decrement');
    }
  },
  getters: {
    count: state => state.count
  }
});
 
// 在 Vue 组件中使用 Vuex
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
 
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
 
export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['count'])
  },
  methods: {
    ...mapActions(['increment', 'decrement'])
  }
};
</script>

在这个例子中，我们创建了一个 Vuex Store，包含了 state、mutations、actions 和 getters。在 Vue 组件中，我们使用 mapState、mapGetters、mapActions 帮助函数来简化访问和使用 Vuex 状态管理。