Vuex核心概念

Vuex核心概念

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

1. 状态（State）

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

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

在组件中访问：

// Component.vue
computed: {
  count() {
    return this.$store.state.count
  }
}

2. 获取器（Getters）

Getters可以认为是store的计算属性，用于派生状态。

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

使用示例：

this.$store.getters.doubleCount // 0
this.$store.getters.userAgePlus(5) // 35

3. 变更（Mutations）

Mutations是改变state的唯一方法，必须是同步函数。

mutations: {
  increment(state) {
    state.count++
  },
  incrementBy(state, payload) {
    state.count += payload.amount
  }
}

调用方式：

this.$store.commit('increment')
this.$store.commit('incrementBy', { amount: 10 })

4. 动作（Actions）

Actions类似于mutations，但可以包含任意异步操作。

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

调用方式：

this.$store.dispatch('incrementAsync')

5. 模块（Modules）

当应用变得复杂时，可以将store分割成模块。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})

数据流图示

graph LR A[组件] -->|dispatch| B[Actions] B -->|commit| C[Mutations] C -->|mutate| D[State] D -->|render| A

实际应用案例

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

// 购物车模块
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)
        }
      )
    }
  }
}

数学公式示例

在计算折扣时可能会用到公式： $discountedPrice=originalPrice\times (1-discountRate)$

总结

Vuex的核心概念构成了一个完整的应用状态管理系统：

• State：单一数据源
• Getters：派生状态
• Mutations：同步状态变更
• Actions：异步操作
• Modules：状态分块管理

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