掌握Vuex：构建高效状态管理的购物车实例指南

Vuex 是 Vue.js 的官方状态管理库，它为 Vue 应用提供了一个集中存储所有组件状态的地方，并以相应的规则保证状态以一种可预测的方式发生变化。

1. 安装 Vuex

首先，需要安装 Vuex：

npm install vuex --save

2. 创建 Store

在 Vue 项目中创建一个 store 文件夹，并在其中创建 index.js 文件：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cart: []
  },
  getters: {
    cartCount: state => state.cart.length
  },
  mutations: {
    ADD_TO_CART(state, product) {
      state.cart.push(product);
    },
    REMOVE_FROM_CART(state, product) {
      state.cart = state.cart.filter(p => p.id !== product.id);
    }
  },
  actions: {
    addToCart({ commit }, product) {
      commit('ADD_TO_CART', product);
    },
    removeFromCart({ commit }, product) {
      commit('REMOVE_FROM_CART', product);
    }
  }
});

3. 将 Store 引入到 Vue 应用

在 main.js 文件中引入 store，并将其作为 Vue 实例的一部分：

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

4. 使用 Vuex 在组件中

在 Vue 组件中，可以使用 mapState、mapGetters、mapActions 和 mapMutations 辅助函数来简化 Vuex 的使用：

<template>
  <div>
    <h3>Product List</h3>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
        <button @click="addToCart(product)">Add to Cart</button>
      </li>
    </ul>
    <h3>Cart</h3>
    <ul>
      <li v-for="product in cart" :key="product.id">
        {{ product.name }} - {{ product.price }}
        <button @click="removeFromCart(product)">Remove</button>
      </li>
    </ul>
    <p>Total items in cart: {{ cartCount }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['cart']),
    ...mapGetters(['cartCount']),
    products() {
      // 假设这是从 API 获取的产品列表
      return [
        { id: 1, name: 'Apple', price: '$1' },
        { id: 2, name: 'Banana', price: '$2' },
        { id: 3, name: 'Cherry', price: '$3' }
      ];
    }
  },
  methods: {
    ...mapActions(['addToCart']),
    ...mapMutations(['REMOVE_FROM_CART']),
    removeFromCart(product) {
      this.removeFromCart(product);
    }
  }
};
</script>

5. Vuex 的核心概念

• State：Vuex 存储所有状态的容器，可以认为是一个大对象。
• Getters：可以认为是 store 的计算属性，允许你从 store 中的 state 派生出一些状态。
• Mutations：是同步函数，用于修改 state，是唯一能够修改 state 的方法。
• Actions：类似于 mutations，但它们负责提交 mutation 而不是直接变更状态，可以包含任意异步操作。
• Modules：允许将 store 分割成模块，每个模块拥有自己的 state、mutations、actions、getters，甚至是嵌套子模块。

通过上述实例，我们可以看到 Vuex 提供了一个清晰、组织化的方式来管理 Vue 应用的状态。它使得状态的变更变得可预测，并且可以在多个组件之间共享状态。