Vuex全局状态管理：从原理到实践

---

Vuex全局状态管理：从原理到实践

一、为什么需要状态管理？

在Vue组件化开发中，当多个组件需要共享状态时，单纯依靠props和自定义事件会变得复杂（如跨层级组件通信）。Vuex作为官方状态管理库，提供了集中式存储管理应用的所有组件的状态，确保状态变更可预测。

---

二、Vuex核心概念

1. State（状态仓库）

存储所有组件的共享状态，类似组件中的data。

// store.js
const store = new Vuex.Store({
   
  state: {
   
    count: 0,
    todos: []
  }
})

2. Getters（计算属性）

从state派生出新状态，类似组件的computed。

getters: {
   
  doneTodos: state => {
   
    return state.todos.filter(todo => todo.done)
  }
}

3. Mutations（同步修改）

唯一修改state的方式，必须是同步函数。

mutations: {
   
  increment(state) {
   
    state.count++
  },
  addTodo(state, todo) {
   
    state.todos.push(todo)
  }
}
// 组件中调用：this.$store.commit('increment&#