编辑“︁Vuex核心概念”︁

= Vuex核心概念 =

Vuex是Vue.js应用程序的'''状态管理模式+库'''，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本节将详细介绍Vuex的核心概念，包括State、Getters、Mutations、Actions和Modules。

== 1. 状态（State） ==
State是Vuex存储应用状态的单一数据源，类似于组件中的data属性，但它是全局共享的。

<syntaxhighlight lang="javascript">
// store.js
const store = new Vuex.Store({
  state: {
    count: 0,
    user: {
      name: 'John Doe',
      age: 30
    }
  }
})
</syntaxhighlight>

在组件中访问：
<syntaxhighlight lang="javascript">
// Component.vue
computed: {
  count() {
    return this.$store.state.count
  }
}
</syntaxhighlight>

== 2. 获取器（Getters） ==
Getters可以认为是store的计算属性，用于派生状态。

<syntaxhighlight lang="javascript">
getters: {
  doubleCount: state => state.count * 2,
  // 带参数的getter
  userAgePlus: (state) => (years) => state.user.age + years
}
</syntaxhighlight>

使用示例：
<syntaxhighlight lang="javascript">
this.$store.getters.doubleCount // 0
this.$store.getters.userAgePlus(5) // 35
</syntaxhighlight>

== 3. 变更（Mutations） ==
Mutations是改变state的唯一方法，必须是同步函数。

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

调用方式：
<syntaxhighlight lang="javascript">
this.$store.commit('increment')
this.$store.commit('incrementBy', { amount: 10 })
</syntaxhighlight>

== 4. 动作（Actions） ==
Actions类似于mutations，但可以包含任意异步操作。

<syntaxhighlight lang="javascript">
actions: {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  },
  async fetchUser({ commit }) {
    const user = await api.getUser()
    commit('setUser', user)
  }
}
</syntaxhighlight>

调用方式：
<syntaxhighlight lang="javascript">
this.$store.dispatch('incrementAsync')
</syntaxhighlight>

== 5. 模块（Modules） ==
当应用变得复杂时，可以将store分割成模块。

<syntaxhighlight lang="javascript">
const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

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

== 数据流图示 ==
<mermaid>
graph LR
    A[组件] -->|dispatch| B[Actions]
    B -->|commit| C[Mutations]
    C -->|mutate| D[State]
    D -->|render| A
</mermaid>

== 实际应用案例 ==
'''电商购物车场景'''：
1. State存储商品列表和购物车内容
2. Getters计算总价和折扣
3. Mutations处理添加/删除商品
4. Actions处理异步的库存检查

<syntaxhighlight lang="javascript">
// 购物车模块
const cart = {
  state: {
    items: [],
    checkoutStatus: null
  },
  getters: {
    cartTotal: state => {
      return state.items.reduce((total, item) => total + item.price * item.quantity, 0)
    }
  },
  mutations: {
    pushItemToCart(state, item) {
      state.items.push(item)
    }
  },
  actions: {
    checkout({ commit, state }, products) {
      // 保存当前购物车商品
      const savedCartItems = [...state.items]
      // 清空购物车
      commit('setCheckoutStatus', null)
      // 发送购物车内容到服务器
      shop.buyProducts(
        products,
        () => commit('setCheckoutStatus', 'successful'),
        () => {
          commit('setCheckoutStatus', 'failed')
          // 失败时恢复购物车
          commit('setCartItems', savedCartItems)
        }
      )
    }
  }
}
</syntaxhighlight>

== 数学公式示例 ==
在计算折扣时可能会用到公式：
<math>discountedPrice = originalPrice \times (1 - discountRate)</math>

== 总结 ==
Vuex的核心概念构成了一个完整的应用状态管理系统：
* '''State'''：单一数据源
* '''Getters'''：派生状态
* '''Mutations'''：同步状态变更
* '''Actions'''：异步操作
* '''Modules'''：状态分块管理

理解这些概念及其相互关系是掌握Vuex的关键。在实际项目中，合理使用这些特性可以大大简化复杂应用的状态管理。

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