Vuex 是什么？VueX简介

聚沙成塔·每天进步一点点

⭐ 专栏简介

Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！

---

Vuex 是什么

Vuex 是 Vue.js 的官方状态管理模式，用于管理和维护 Vue 应用中的状态。它借鉴了 Flux 的理念，通过集中式的状态管理，使得应用的状态在不同组件之间能够轻松共享和维护。Vuex 的核心思想是将应用的所有组件的共享状态集中在一个地方，并以可预测的方式进行管理。

核心概念

1.State（状态）

State 是存储应用状态的地方。Vuex 使用单一状态树——是一个对象，包含了全部应用级别的状态。这也意味着每一个应用将仅仅包含一个 store 实例。

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

2. Getter（获取器）

Getters 是 store 的计算属性。就像 Vue 的计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

3. Mutation（突变）

Mutation 是更改 Vuex 的 store 中的状态的唯一方法。Vuex 中的 mutation 非常类似于事件：每一个 mutation 都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

4. Action（动作）

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

5. Module（模块）

由于使用单一状态树，应用的所有状态会集中到一个较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，甚至是嵌套子模块——从上至下进行同样方式的分割。

const moduleA = {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementIfOdd({ state, commit }) {
      if ((state.count + 1) % 2 === 0) {
        commit('increment')
      }
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
}

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

原理解析

Vuex 的核心是一个单一状态树和响应式状态管理。它使用 Vue.js 内置的响应系统来跟踪依赖关系，从而高效地更新视图。每个状态变更（通过 mutation）都会被记录，方便调试和状态回溯。

数据流

Vuex 实现了一个单向数据流：

1. 组件 触发 action。
2. action 可以包含异步操作，然后提交 mutation。
3. mutation 更改 state。
4. state 更新触发 getter 重新计算，组件 重新渲染。

这个数据流确保了状态管理的可预测性和调试的便利性。

Devtools

Vuex 还提供了与 Vue Devtools 集成的功能，可以让你更方便地查看和调试状态变化，进行时间旅行和状态快照。

Vuex 是构建复杂前端应用的强大工具，通过集中化管理应用状态和提供清晰的数据流，使开发者能够更加高效地开发和维护应用。如果你的应用需要管理多个组件之间共享的状态，Vuex 是一个非常合适的选择。

---

⭐ 写在最后

欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，