什么是 Vuex 和 Vuex Persistedstate？

terry 4小时前阅读数 9 #Vue

在 Vue.js 应用开发中，状态管理是一个重要的环节，Vuex 作为 Vue.js 的官方状态管理模式，为我们提供了一种集中式存储管理应用所有组件状态的解决方案，而 Vuex Persistedstate 则是 Vuex 的一个插件，它可以帮助我们将 Vuex 中的状态持久化存储在浏览器的本地存储（如 localStorage、sessionStorage）中，以便在页面刷新或重新加载时保留状态。

Vuex 的基本概念

Vuex 采用了集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，它有以下几个核心概念：

**State**：用于存储应用的状态，是 Vuex 中数据的唯一来源。
**Getter**：可以对 State 中的数据进行加工处理，类似于 Vue 中的计算属性。
**Mutation**：是更改 Vuex 中 State 的唯一方法，且必须是同步函数。
**Action**：用于处理异步操作，它可以提交 Mutation 来改变 State。
**Module**：将 Vuex 的状态管理拆分成多个模块，每个模块都有自己的 State、Getter、Mutation 和 Action，这样可以使代码更加模块化和易于维护。

举个简单的例子,假设我们有一个购物车应用，购物车中的商品列表就是一个状态（State），当用户添加商品到购物车时，我们可以通过提交一个 Mutation 来更新商品列表，如果添加商品的操作涉及到异步请求（比如从服务器获取商品信息），我们就可以在 Action 中处理这个异步操作，然后再提交 Mutation。

Vuex Persistedstate 的作用

在实际应用中,我们经常会遇到这样的情况：当用户刷新页面或重新打开应用时，Vuex 中的状态会被重置，这对于一些需要保留用户操作状态的应用来说是很不方便的，Vuex Persistedstate 就是为了解决这个问题而出现的。

它的主要作用是将 Vuex 中的状态持久化存储在浏览器的本地存储中，当页面刷新或重新加载时，它会从本地存储中读取之前保存的状态，并将其恢复到 Vuex 中，这样就可以保证用户的操作状态不会丢失。

在一个用户登录的应用中,用户登录后，我们会将用户的登录状态（如用户信息、token 等）存储在 Vuex 的 State 中，如果没有 Vuex Persistedstate，当用户刷新页面时，登录状态就会丢失，用户需要重新登录，而使用了 Vuex Persistedstate 后，我们可以将登录状态持久化存储在本地存储中，这样即使页面刷新，用户也不需要重新登录。

如何使用 Vuex 和 Vuex Persistedstate

安装 Vuex

我们需要在项目中安装 Vuex，可以使用 npm 或 yarn 进行安装：

npm install vuex --save
# 或者
yarn add vuex

创建 Vuex 实例

在项目中创建一个 `store` 目录，然后在该目录下创建一个 `index.js` 文件，用于创建 Vuex 实例：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 在这里定义状态
},
getters: {
// 在这里定义 Getter
},
mutations: {
// 在这里定义 Mutation
},
actions: {
// 在这里定义 Action
},
modules: {
// 在这里定义 Module
}
})
export default store

在 Vue 组件中使用 Vuex

在 Vue 组件中，可以通过 `this.$store` 来访问 Vuex 实例，在组件的 `computed` 属性中使用 Getter：

export default {
  computed: {
    someValue () {
      return this.$store.getters.someGetter
    }
  },
  methods: {
    someMethod () {
      this.$store.commit('someMutation')
      this.$store.dispatch('someAction')
    }
  }
}

安装 Vuex Persistedstate

安装 Vuex Persistedstate：

npm install vuex-persistedstate --save
# 或者
yarn add vuex-persistedstate

配置 Vuex Persistedstate

在 `store/index.js` 文件中配置 Vuex Persistedstate：

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// 其他配置...
plugins: [createPersistedState()]
})

这样,Vuex 中的状态就会默认持久化存储在 localStorage 中，如果想要存储在 sessionStorage 中，可以进行如下配置：

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// 其他配置...
plugins: [createPersistedState({
storage: window.sessionStorage
})]
})

还可以指定需要持久化存储的状态：

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// 其他配置...
plugins: [createPersistedState({
paths: ['someState'] // 只持久化存储 someState 状态
})]
})

Vuex 为 Vue.js 应用提供了强大的状态管理功能，而 Vuex Persistedstate 则进一步增强了 Vuex 的实用性，使得我们可以方便地将状态持久化存储，提升用户体验，通过本文的介绍，希望你对 Vuex 和 Vuex Persistedstate 有了更清晰的认识，并能够在实际项目中熟练运用它们。