Vuex 的使用场景和使用方法

1. Vuex 是什么？

Vuex 是 Vue.js 的状态管理模式，专门用于管理多个组件共享的状态。它的核心思想是：

• 集中式存储：将应用的所有状态集中管理
• 单一数据源：整个应用的状态存在一个 store 中
• 只能通过特定 mutation 修改 state
• 支持调试、插件和热重载

2. Vuex 的使用场景

Vuex 的最佳使用场景是中大型复杂应用，主要包括以下情况：
• 多个组件需要共享状态（如登录状态、用户信息、购物车等）
• 多级组件传参复杂、跨组件通信频繁
• 需要统一管理和跟踪状态变化（如记录修改历史、调试）

3. Vuex 的使用方法（示例）

以一个简单的购物车为例：
1. 安装 Vuex

npm install vuex@next

2. 创建 Store（store/index.js）

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    cart: []
  },
  getters: {
    cartItemCount: (state) => state.cart.length,
    totalPrice: (state) => state.cart.reduce((total, item) => total + item.price * item.quantity, 0)
  },
  mutations: {
    ADD_TO_CART(state, product) {
      const item = state.cart.find(i => i.id === product.id);
      if (item) {
        item.quantity++;
      } else {
        state.cart.push({ ...product, quantity: 1 });
      }
    },
    REMOVE_FROM_CART(state, productId) {
      state.cart = state.cart.filter(item => item.id !== productId);
    }
  },
  actions: {
    addToCart({ commit }, product) {
      commit('ADD_TO_CART', product);
    },
    removeFromCart({ commit }, productId) {
      commit('REMOVE_FROM_CART', productId);
    }
  }
});

3. 注册 Store（main.js）

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');

4. 使用 Vuex 在组件中读取和修改数据
 

 4. 运行效果

1. 点击“Add to Cart”，商品加入购物车。
2. 购物车列表展示商品数量和总价。
3. 点击“Remove”可移除商品。

 5. Vuex 使用总结

• Vuex 适合复杂状态管理和组件树很深的场景。
• 在简单应用中，可以直接使用 props 和 emit 传递数据。
• 在大型项目中，Vuex 能提供良好的状态管理和调试能力。