编辑“︁Vuex状态管理简介”︁

= Vuex状态管理简介 =

'''Vuex''' 是 [[Vue.js]] 的官方状态管理库，专为构建复杂单页应用（SPA）设计。它采用集中式存储管理应用的所有组件的状态，并通过严格的规则确保状态变更的可预测性。本指南将详细介绍Vuex的核心概念、工作原理及实际应用场景。

== 什么是状态管理？ ==
在Vue应用中，'''状态'''（state）即驱动应用的数据源。当多个组件需要共享同一状态时，传统的组件间通信（如props/events）会变得难以维护。Vuex通过以下方式解决这一问题：
* '''单一数据源'''：所有组件共享同一存储（store）
* '''响应式更新'''：状态变更自动反映在依赖组件中
* '''严格变更流程'''：通过mutations/actions确保变更可追踪

<mermaid>
graph LR
    A[组件] -->|Dispatch| B(Actions)
    B -->|Commit| C(Mutations)
    C -->|Mutate| D(State)
    D -->|Render| A
</mermaid>

== 核心概念 ==

=== 1. State ===
存储应用状态的单一对象，相当于组件的"data"但全局共享。

<syntaxhighlight lang="javascript">
// store.js
const store = new Vuex.Store({
  state: {
    count: 0,
    user: null
  }
})
</syntaxhighlight>

=== 2. Getters ===
相当于store的计算属性，用于派生状态。

<syntaxhighlight lang="javascript">
getters: {
  doubleCount: state => state.count * 2,
  greeting: (state) => {
    return state.user ? `Hello, ${state.user.name}!` : 'Please login'
  }
}
</syntaxhighlight>

=== 3. Mutations ===
'''同步'''修改状态的唯一途径，每个mutation都有一个字符串类型的事件类型（type）和回调函数。

<syntaxhighlight lang="javascript">
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

// 组件中调用
this.$store.commit('increment', { amount: 10 })
</syntaxhighlight>

=== 4. Actions ===
处理异步操作，通过提交mutation来改变状态。

<syntaxhighlight lang="javascript">
actions: {
  async fetchUser({ commit }, userId) {
    const user = await api.getUser(userId)
    commit('SET_USER', user)
  }
}

// 组件中调用
this.$store.dispatch('fetchUser', '123')
</syntaxhighlight>

=== 5. Modules ===
将store分割成模块，每个模块拥有自己的state/mutations/actions/getters。

<syntaxhighlight lang="javascript">
const userModule = {
  state: () => ({ profile: null }),
  mutations: { /* ... */ }
}

const store = new Vuex.Store({
  modules: {
    user: userModule
  }
})
</syntaxhighlight>

== 数学原理 ==
Vuex的状态更新遵循函数式编程原则，可表示为：

<math>
S_{t+1} = mutation(S_t, A_t)
</math>

其中：
* <math>S_t</math> 是时间t的状态
* <math>A_t</math> 是触发的action
* <math>mutation</math> 是纯函数

== 实际案例：购物车系统 ==

=== 存储定义 ===
<syntaxhighlight lang="javascript">
// store/cart.js
export default {
  state: {
    items: [],
    checkoutStatus: null
  },
  mutations: {
    ADD_ITEM(state, product) {
      state.items.push(product)
    }
  },
  actions: {
    checkout({ commit, state }) {
      return api.postCheckout(state.items).then(
        res => commit('SET_STATUS', 'success')
      )
    }
  }
}
</syntaxhighlight>

=== 组件使用 ===
<syntaxhighlight lang="vue">
<template>
  <div>
    <button @click="addToCart(product)">Add to Cart</button>
    <span>Cart items: {{ cartItemsCount }}</span>
  </div>
</template>

<script>
export default {
  computed: {
    cartItemsCount() {
      return this.$store.state.cart.items.length
    }
  },
  methods: {
    addToCart(product) {
      this.$store.commit('ADD_ITEM', product)
    }
  }
}
</script>
</syntaxhighlight>

== 最佳实践 ==
1. '''模块化设计'''：大型应用按功能拆分模块
2. '''严格模式'''：开发时启用<code>strict: true</code>防止直接修改state
3. '''Action组合'''：使用<code>async/await</code>或Promise处理复杂异步流
4. '''类型安全'''：配合TypeScript使用类型定义

== 常见问题 ==
'''Q: 何时该用Vuex？'''
A: 当遇到以下情况时：
* 多个组件依赖同一状态
* 不同组件需要修改同一状态
* 需要维护状态变更历史（如时间旅行调试）

'''Q: 可以直接修改state吗？'''
A: 严格模式下禁止，应始终通过mutations修改以保证可追踪性。

== 总结 ==
Vuex通过集中式状态管理解决了复杂应用中的数据流问题。其核心架构包含：
* 单一状态树（Single State Tree）
* 可预测的状态变更（Mutations）
* 异步操作处理（Actions）
* 模块化组织（Modules）

对于中小型应用，可先使用简单的store模式（<code>new Vue({ store: { ... } })</code>），当复杂度提升时再迁移到完整Vuex。

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