Vuex 在实际项目中的应用：从零到实战

---

1. 前言

在 Vue 2 的开发过程中，组件之间的状态管理是一个重要的课题。Vuex 是 Vue.js 官方提供的状态管理模式，它专门用于管理应用中的共享状态，确保数据的可预测性和一致性。

本篇文章将结合实际项目场景，讲解 Vuex 的应用方式，帮助开发者更好地理解和使用 Vuex。

2. Vuex 在项目中的应用场景

Vuex 适用于以下场景：

• 用户登录信息管理：存储用户 Token 和基本信息，避免每个组件都要单独维护。
• 购物车管理：在电商项目中，全局存储购物车数据，确保多个页面能访问相同的购物车状态。
• 权限控制：不同用户角色可能有不同权限，Vuex 可以集中管理这些权限信息。
• 异步数据共享：例如获取 API 数据后，全局存储，避免重复请求。

3. Vuex 在实际项目中的应用

3.1 安装 Vuex

npm install vuex --save

3.2 在 Vue 项目中创建 Vuex Store

通常，我们会在 store 目录下创建 index.js 作为 Vuex 的入口，并将不同的状态管理拆分成模块。

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import auth from './modules/auth';
import cart from './modules/cart';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    auth,
    cart
  }
});

3.3 模块化管理 Vuex

store/modules/auth.js（用户管理模块）

const state = {
  token: localStorage.getItem('token') || '',
  userInfo: JSON.parse(localStorage.getItem('userInfo')) || {}
};

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token;
    localStorage.setItem('token', token);
  },
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo;
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
  }
};

const actions = {
  login({ commit }, userData) {
    return new Promise((resolve) => {
      setTimeout(() => {
        commit('SET_TOKEN', 'mocked_token');
        commit('SET_USER_INFO', userData);
        resolve();
      }, 1000);
    });
  }
};

const getters = {
  isAuthenticated: state => !!state.token,
  userInfo: state => state.userInfo
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

store/modules/cart.js（购物车管理模块）

const state = {
  cartItems: []
};

const mutations = {
  ADD_TO_CART(state, item) {
    state.cartItems.push(item);
  },
  REMOVE_FROM_CART(state, itemId) {
    state.cartItems = state.cartItems.filter(item => item.id !== itemId);
  }
};

const actions = {
  addToCart({ commit }, item) {
    commit('ADD_TO_CART', item);
  },
  removeFromCart({ commit }, itemId) {
    commit('REMOVE_FROM_CART', itemId);
  }
};

const getters = {
  cartItemCount: state => state.cartItems.length,
  cartItems: state => state.cartItems
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

3.4 在 Vue 组件中使用 Vuex

在 Vue 组件中，可以使用 mapState、mapMutations、mapActions 和 mapGetters 来访问 Vuex 数据。

示例：Login.vue

<template>
  <div>
    <p v-if="!isAuthenticated">未登录</p>
    <p v-else>欢迎, {{ userInfo.name }}</p>
    <button @click="handleLogin">登录</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState('auth', ['token', 'userInfo']),
    ...mapGetters('auth', ['isAuthenticated'])
  },
  methods: {
    ...mapActions('auth', ['login']),
    async handleLogin() {
      await this.login({ name: '张三', email: 'zhangsan@example.com' });
    }
  }
};
</script>

示例：Cart.vue

<template>
  <div>
    <p>购物车商品数量：{{ cartItemCount }}</p>
    <button @click="addItem">添加商品</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState('cart', ['cartItems']),
    ...mapGetters('cart', ['cartItemCount'])
  },
  methods: {
    ...mapActions('cart', ['addToCart']),
    addItem() {
      this.addToCart({ id: 1, name: '商品A', price: 100 });
    }
  }
};
</script>

4. 总结

本文结合实际项目需求，介绍了 Vuex 在用户管理和购物车管理中的应用方式，避免了单纯的 API 说明，让 Vuex 的使用更加贴近真实开发场景。

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏、分享！🚀