剖析Vuex的核心概念，以更清晰的思路拥抱数据管理！

2023-10-27 10:18:27

单一状态树

Vuex最核心的概念之一是单一状态树 。它将整个应用程序的状态存储在一个单一的对象中，这个对象就是Vuex的store。这样做的好处显而易见：

简化了状态管理： 通过将所有状态存储在一个地方，您可以更轻松地跟踪应用程序的状态，并确保应用程序的各个组件都可以访问这些状态。
提高了可预测性： 由于应用程序的状态集中在一个地方，因此更容易预测应用程序的行为。这使得调试和维护应用程序更加容易。
提高了性能： 通过将状态存储在一个对象中，Vuex可以更有效地更新状态。这可以提高应用程序的性能，尤其是当应用程序的状态非常庞大时。

Getters

Getters 允许您从Vuex store中获取状态，但不会直接修改它。这非常有用，因为它允许您在不改变原始状态的情况下访问和操作状态。

const getters = {
  // 计算总价
  totalPrice: (state) => {
    return state.cart.reduce((total, item) => total + item.price, 0);
  },
  // 计算总数量
  totalCount: (state) => {
    return state.cart.reduce((total, item) => total + item.quantity, 0);
  },
};

Mutations

Mutations 允许您修改Vuex store中的状态。需要注意的是，mutations必须是同步的，这意味着它们必须立即执行，并且不能包含任何异步操作。

const mutations = {
  // 将商品添加到购物车
  addToCart: (state, item) => {
    const existingItem = state.cart.find((i) => i.id === item.id);
    if (existingItem) {
      existingItem.quantity++;
    } else {
      state.cart.push(item);
    }
  },
  // 从购物车中移除商品
  removeFromCart: (state, item) => {
    const index = state.cart.findIndex((i) => i.id === item.id);
    if (index > -1) {
      state.cart.splice(index, 1);
    }
  },
};

Actions

Actions 允许您执行异步操作，并在操作完成后提交mutation。这非常有用，因为它允许您将应用程序的业务逻辑与UI逻辑分开。

const actions = {
  // 从服务器加载购物车数据
  loadCart: (context) => {
    return new Promise((resolve) => {
      // 模拟从服务器获取数据
      setTimeout(() => {
        const data = [{ id: 1, name: '商品1', price: 10, quantity: 2 }, { id: 2, name: '商品2', price: 20, quantity: 1 }];
        context.commit('setCart', data);
        resolve();
      }, 1000);
    });
  },
  // 向服务器发送订单
  placeOrder: (context) => {
    return new Promise((resolve) => {
      // 模拟向服务器发送订单
      setTimeout(() => {
        // 模拟服务器返回的结果
        const result = { success: true };
        resolve(result);
      }, 1000);
    });
  },
};

Modules

Modules 允许您将Vuex store拆分成更小的部分。这非常有用，因为它可以帮助您组织和管理大型应用程序的状态。

const modules = {
  cart: {
    state: {
      items: [],
    },
    getters: {
      totalPrice: (state) => {
        return state.items.reduce((total, item) => total + item.price * item.quantity, 0);
      },
      totalCount: (state) => {
        return state.items.reduce((total, item) => total + item.quantity, 0);
      },
    },
    mutations: {
      addToCart: (state, item) => {
        const existingItem = state.items.find((i) => i.id === item.id);
        if (existingItem) {
          existingItem.quantity++;
        } else {
          state.items.push(item);
        }
      },
      removeFromCart: (state, item) => {
        const index = state.items.findIndex((i) => i.id === item.id);
        if (index > -1) {
          state.items.splice(index, 1);
        }
      },
    },
    actions: {
      loadCart: (context) => {
        return new Promise((resolve) => {
          // 模拟从服务器获取数据
          setTimeout(() => {
            const data = [{ id: 1, name: '商品1', price: 10, quantity: 2 }, { id: 2, name: '商品2', price: 20, quantity: 1 }];
            context.commit('setCart', data);
            resolve();
          }, 1000);
        });
      },
      placeOrder: (context) => {
        return new Promise((resolve) => {
          // 模拟向服务器发送订单
          setTimeout(() => {
            // 模拟服务器返回的结果
            const result = { success: true };
            resolve(result);
          }, 1000);
        });
      },
    },
  },
};