vuejs3.0 从入门到精通——Vuex

发布时间 2023-11-13 15:56:58作者: 左扬

Vuex

https://vuex.vuejs.org/zh/

一、Vue是什么?

  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式+。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

1.1、什么是 "状态管理模式"?

  状态管理模式是一种在前端开发中管理应用状态的方法。在大型应用中,状态管理通常是一个复杂的问题,因为许多组件可能需要共享同一状态,或者需要在不同组件之间传递状态。为了解决这些问题,我们可以采用状态管理模式。

  Vuex 是一个专为 Vue.js 设计的状态管理模式和库。它提供了一种集中式存储管理应用程序中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。这使得我们能够直接在组件之间共享状态,而不必通过繁琐的 prop 传递或者事件广播。

  Vuex 基于 Flux 和 Redux,但它更简洁,更易于集成到 Vue.js 中。Vuex 利用 Vue.js 的细粒度数据响应性,使得状态更新更加高效。在 Vuex 中,我们有一个全局的 state 对象,用于存储整个应用的状态。我们可以通过 mutations 修改状态,mutations 是一个同步事务,用于修改 state。我们还有一个 actions 概念,它是一个可以包含任意异步操作的方法,可以通过提交 mutation 修改状态。

  Vuex 提供了模块化的概念,让我们能够将 Vuex Store 分割成模块(modules)。每个模块拥有自己的 state、mutation、action、getter,甚至可以嵌套子模块——从上至下进行同样方式的分割。这种方式可以让我们的状态管理更加清晰,更加易于维护。

1.2、什么情况下使用 Vuex?

  Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

  如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用Vuex。一个简单的store模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是:

Flux 架构就像眼镜:您自会知道什么时候需要它。