编辑“︁Vuex最佳实践”︁（章节）

= Vuex最佳实践 =

== 介绍 ==
'''Vuex''' 是 Vue.js 的官方状态管理库，用于管理应用程序中的全局状态。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 特别适合中大型单页应用（SPA），但在小型项目中也可以提供清晰的状态管理方案。

Vuex 的核心概念包括：
* '''State'''：单一状态树，存储应用的状态数据。
* '''Getters'''：从 state 中派生出一些状态，类似于计算属性。
* '''Mutations'''：唯一更改 state 的方法，必须是同步函数。
* '''Actions'''：提交 mutations，可以包含异步操作。
* '''Modules'''：将 store 分割成模块，每个模块拥有自己的 state、getters、mutations 和 actions。

== 最佳实践 ==

=== 1. 模块化设计 ===
对于大型应用，将 Vuex store 分割成模块是必要的。每个模块可以专注于特定的功能域。

<syntaxhighlight lang="javascript">
// store/modules/user.js
const userModule = {
  namespaced: true,
  state: () => ({
    user: null,
    isAuthenticated: false
  }),
  mutations: {
    SET_USER(state, user) {
      state.user = user;
      state.isAuthenticated = !!user;
    }
  },
  actions: {
    login({ commit }, credentials) {
      return api.login(credentials).then(user => {
        commit('SET_USER', user);
      });
    }
  }
};

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

export default createStore({
  modules: {
    user: userModule
  }
});
</syntaxhighlight>

'''优点'''：
* 代码组织更清晰
* 避免命名冲突（使用 namespaced: true）
* 便于团队协作

=== 2. 严格模式 ===
在开发环境下启用严格模式，可以检测不合法的 state 修改。

<syntaxhighlight lang="javascript">
const store = createStore({
  // ...
  strict: process.env.NODE_ENV !== 'production'
});
</syntaxhighlight>

'''注意'''：生产环境应禁用严格模式以避免性能开销。

=== 3. 使用 Action 处理异步 ===
所有异步操作都应该在 actions 中处理，mutations 应保持同步。

<syntaxhighlight lang="javascript">
actions: {
  async fetchProducts({ commit }) {
    try {
      const products = await api.getProducts();
      commit('SET_PRODUCTS', products);
    } catch (error) {
      commit('SET_ERROR', error.message);
    }
  }
}
</syntaxhighlight>

=== 4. 合理使用 Getters ===
Getters 适用于需要从 state 派生复杂数据的场景。

<syntaxhighlight lang="javascript">
getters: {
  activeUsers: state => {
    return state.users.filter(user => user.isActive);
  },
  userById: state => id => {
    return state.users.find(user => user.id === id);
  }
}
</syntaxhighlight>

=== 5. 类型安全 ===
对于 TypeScript 项目，使用类型定义增强代码可靠性。

<syntaxhighlight lang="typescript">
interface UserState {
  user: User | null;
  isAuthenticated: boolean;
}

const userModule: Module<UserState, RootState> = {
  namespaced: true,
  state: (): UserState => ({
    user: null,
    isAuthenticated: false
  }),
  // ...
};
</syntaxhighlight>

== 实际案例 ==

=== 电商购物车 ===
以下是一个电商网站购物车的 Vuex 实现示例：

<mermaid>
stateDiagram-v2
    [*] --> Cart
    Cart --> Products
    Cart --> Items
    Items --> Product
    Items --> Quantity
</mermaid>

<syntaxhighlight lang="javascript">
// store/modules/cart.js
export default {
  namespaced: true,
  state: () => ({
    items: [],
    checkoutStatus: null
  }),
  getters: {
    cartTotal: (state) => {
      return state.items.reduce((total, item) => {
        return total + (item.price * item.quantity);
      }, 0);
    }
  },
  mutations: {
    ADD_ITEM(state, product) {
      const existingItem = state.items.find(item => item.id === product.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        state.items.push({ ...product, quantity: 1 });
      }
    },
    REMOVE_ITEM(state, itemId) {
      state.items = state.items.filter(item => item.id !== itemId);
    }
  },
  actions: {
    checkout({ commit, state }) {
      return api.checkout(state.items).then(() => {
        commit('SET_CHECKOUT_STATUS', 'success');
        commit('CLEAR_CART');
      });
    }
  }
};
</syntaxhighlight>

== 性能优化 ==

=== 1. 避免大型 state 树 ===
* 只存储必要的全局状态
* 考虑将非响应式数据移出 Vuex

=== 2. 使用辅助函数 ===
mapState, mapGetters, mapActions 可以减少样板代码：

<syntaxhighlight lang="javascript">
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('user', ['user', 'isAuthenticated']),
    ...mapGetters('cart', ['cartTotal'])
  },
  methods: {
    ...mapActions('user', ['login']),
    ...mapActions('cart', ['checkout'])
  }
};
</syntaxhighlight>

=== 3. 持久化状态 ===
使用插件如 vuex-persistedstate 保持状态持久化：

<syntaxhighlight lang="javascript">
import createPersistedState from 'vuex-persistedstate';

const store = createStore({
  // ...
  plugins: [createPersistedState()]
});
</syntaxhighlight>

== 常见问题 ==

'''Q: 什么时候应该使用 Vuex？'''
A: 当多个组件需要共享状态，或者状态变更逻辑复杂时。

'''Q: 可以直接修改 state 吗？'''
A: 不应该。应该通过 mutations 来修改 state，这样变更可以被追踪。

'''Q: 如何组织大型项目的 Vuex 代码？'''
A: 按功能模块划分，每个模块放在单独文件中，使用命名空间。

== 总结 ==
Vuex 提供了强大的状态管理能力，但需要遵循最佳实践才能发挥最大价值：
* 合理模块化
* 严格区分 mutations 和 actions
* 适度使用 getters
* 保持类型安全（TypeScript）
* 注意性能优化

通过遵循这些实践，可以构建可维护、可扩展的 Vue.js 应用程序状态管理系统。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vuex状态管理]]