Vuex 的使用场景和使用方法

1. Vuex 是什么?

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

• 集中式存储:将应用的所有状态集中管理

• 单一数据源:整个应用的状态存在一个 store 中

• 只能通过特定 mutation 修改 state

• 支持调试、插件和热重载

2. Vuex 的使用场景

Vuex 的最佳使用场景是中大型复杂应用,主要包括以下情况:

• 多个组件需要共享状态(如登录状态、用户信息、购物车等)

• 多级组件传参复杂、跨组件通信频繁

• 需要统一管理和跟踪状态变化(如记录修改历史、调试)

3. Vuex 的使用方法(示例)

以一个简单的购物车为例:
  1. 安装 Vuex
javascript 复制代码
npm install vuex@next
2. 创建 Store(store/index.js)
javascript 复制代码
// 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)
javascript 复制代码
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');
4. 使用 Vuex 在组件中读取和修改数据
javascript 复制代码
<!-- components/ProductList.vue -->
<template>
  <div>
    <h2>Product List</h2>
    <div v-for="product in products" :key="product.id">
      <p>{{ product.name }} - ${{ product.price }}</p>
      <button @click="addToCart(product)">Add to Cart</button>
    </div>
  </div>
</template>
<script setup>
import { useStore } from 'vuex';

const store = useStore();

const products = [
  { id: 1, name: "Product A", price: 100 },
  { id: 2, name: "Product B", price: 200 }
];

const addToCart = (product) => {
  store.dispatch('addToCart', product);
};
</script>
javascript 复制代码
<!-- components/Cart.vue -->
<template>
  <div>
    <h2>Shopping Cart</h2>
    <div v-if="cart.length === 0">Cart is empty</div>
    <div v-else>
      <div v-for="item in cart" :key="item.id">
        <p>{{ item.name }} - ${{ item.price }} x {{ item.quantity }}</p>
        <button @click="removeFromCart(item.id)">Remove</button>
      </div>
      <p>Total Price: ${{ totalPrice }}</p>
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
const store = useStore();

const cart = store.state.cart;
const totalPrice = store.getters.totalPrice;

const removeFromCart = (id) => {
  store.dispatch('removeFromCart', id);
};
</script>

4. 运行效果

  1. 点击"Add to Cart",商品加入购物车。

  2. 购物车列表展示商品数量和总价。

  3. 点击"Remove"可移除商品。

5. Vuex 使用总结

• Vuex 适合复杂状态管理和组件树很深的场景。

• 在简单应用中,可以直接使用 props 和 emit 传递数据。

• 在大型项目中,Vuex 能提供良好的状态管理和调试能力。

相关推荐
孤水寒月13 分钟前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀22 分钟前
html初学者第一天
前端·html
脑袋大大的1 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络3 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way3 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689974 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github