状态管理

Vue 状态管理是指在 Vue 应用中使用一种特定的模式来管理应用的状态数据。其核心思想是将应用的状态数据集中存储到一个全局的容器中，然后通过特定的方式来访问和修改这些数据，以达到统一管理和维护状态的目的。

在 Vue 中，最常用的状态管理方案是 Vuex，它是 Vue 官方提供的一种状态管理库，能够帮助我们更好地管理应用的状态数据。

核心概念

• state：应用的状态数据存储在一个全局的 state 对象中，通过访问 state 属性来获取或修改其中的数据。
• getters：类似于计算属性，用于派生出一些衍生数据，例如对原始数据进行过滤、排序等操作。
• mutations：用于修改 state 中的数据，必须是同步函数。
• actions：类似于 mutations，但可以是异步操作，可以包含任意异步操作，例如发送网络请求等。
• modules：将应用的状态数据按照模块划分，每个模块都有自己的 state、mutations、actions 和 getters。

持久化

Vuex 持久化是指将 Vuex 中的状态数据持久化存储到本地存储（localStorage）或者会话存储（sessionStorage）中，以便在页面刷新后依然可以访问和使用这些数据。

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

快照

Vuex 状态快照是指在某个时间点上，将当前 Vuex 中的状态数据进行快照存储，以便在后续需要恢复到该时间点的状态时，可以直接使用这个快照数据。

import createUndoRedoPlugin from 'vuex-undo-redo'

// 通过 store.undo() 和 store.redo() 方法来进行撤销和重做操作
const store = new Vuex.Store({
  // ...
  plugins: [createUndoRedoPlugin()]
})

Pinia

新的状态管理库，可以用于 Vue 3 应用程序。与 Vuex 不同，它是基于 Vue 3 的响应式系统构建。Vuex 3.x 只适配 Vue 2，而 Vuex 4.x 是适配 Vue 3 的。

Pinia 与 Vuex(<=4)最大的不同点：mutation 已被弃用 与 不再有嵌套结构的模块。

• mutation 已被弃用。它们经常被认为是极其冗余的。它们初衷是带来 devtools 的集成方案，但这已不再是一个问题了；
• 不再有嵌套结构的模块。你仍然可以通过导入和使用另一个 Store 来隐含地嵌套 stores 空间。虽然 Pinia 从设计上提供的是一个扁平的结构，但仍然能够在 Store 之间进行交叉组合。你甚至可以让 Stores 有循环依赖关系。