Vue项目集成vuex-persistedstate并配置部分持久化

Vue项目中使用Vuex作为状态管理已经是比较通用的做法了，新建Vue项目的时候就可以选择集成Vuex，其实Vuex本质上类似全局的变量存储，方便在所有Vue组件中共享，而且也可以动态改变状态。

在单页应用中Vue项目集成Vuex也就足够基本使用了，但是刷新页面的时候数据都会被清空，在某些情况下，我们需要这些状态能保存下来，比如登录后的用户信息、AccessToken、主题配置等。

这里就需要vuex-persistedstate，他可以把数据保存到localStorage或者Cookie

GitHub地址： https://github.com/robinvdvleuten/vuex-persistedstate

安装：

安装好之后就要做一些配置了

在 store/index.js 中使用

这样就集成成功了，默认情况下，使用localStorage作为存储。

官方已经提供使用cookie存储的教程，比较方便集成，先要安装js-cookie，作为 *** 作cookie的工具。

注意：其实很多公司不允许直接用js修改cookie了，认为是不安全的 *** 作，cookie只能后台服务端修改，httpOnly模式，个人建议不要使用Cooke来存储

集成如下：

目前集成后，vuex-persistedstate默认会把所有state都保存到localStorage之中，其实对于大部分页面来讲，需要store存储的数据很多，但是需要持久化到localStorage的数据并不多，而且localStorage存储大量数据也不合适，因此我们可以自定义部分数据持久化，部分数据只在页面上使用。

vuex-persistedstate提供有一个 reducer 函数，可以自定义存储Key，或者使用 paths 参数，建议使用 paths 参数比较简单

这就算集成完成了，需要持久化的数据手动添加到PERSIST_PATHS中就可以了。

1.vuex的优缺点

2..vuex的使用

先上目录结构：

​

项目中想要管理的数据和状态都在这

连接actions和mutations的桥梁（ *** 作数据的指令）

处理数据， *** 作状态，获取数据都在这，同步去处理数据对应的调用方法 commit

要改变数据时直接用this.$store.commit(SET_LOGIN_MSG, loginMsg)即可

对于一些接口数据，可能需要在组件内异步得去处理一些事情，这时候就需要写在这里，对应的调用方法是dispatch，需要注意的是：它提交的是mutation，不做数据和状态的更改，这些 *** 作在mutations中处理

这里的参数 context 是对象{commit, state},后一个参数是你需要传的数据

对应的在组件内调用方法

由于是异步得所有可以用promise封装使用，解决callhack

以上方法就可以完成vuex的整个状态管理了，完全没有任何问题。但有时候会有一些需求，比如变量name需要在firstName和lastName其中任何一个发生变化时同时发生变化，如果在组件内我们使用computed就能做到，在vuex需要我们的getters登场

Module

到这就完了吗？并没有。如果是大型项目，你会发现需要使用vuex的数据太多了，然而把所有的数据处理全部放在 mutations.js文件中显得很杂乱，并不利于查找与管理，此时我们就需要Module,分模块管理。怎么做呢？

mod1和mod2就是 被分成的两个子模块。因为每个子模块数据和状态不会太多，因此我们把state，mutations，actions，getter写在一个文件中如下

mod1.js

mod2.js也是如此

那么如何调用呢？

更新数据的方法会有所变化吗？依然按照原来的方法使用就行了

总结：

将store进行拆分，有利于我们更好的管理项目中的状态，以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。

3.vuex的注意点

a.在以往我们更新数据时为了防止数据随时变化所以会在更新组件时及时更新数据，甚至每隔一段时间更新数据，有了vuex就无需这么做了，我们只要在我们更改数据时更新一下数据即可。如用户的基本信息，我们只在用户对用户信息进行修改或增加时更新即可，这样在任何组件中使用用户信息时数据都是最新的。

b.使用vuex我们在组件内更改数据是无效的。例如：this.$store.state.name=‘小明‘，这么做会报错。

本小节我们会介绍数据管理工具vuex 。包括什么是 Vuex、Vuex 的安装、以及如何创建和使用 Vuex 数据仓库。

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

让我们从一个简单的 Vue 计数应用开始：

实例演示

"运行案例" 可查看在线运行效果

这个状态自管理应用包含以下几个部分：

以下是一个表示 “单向数据流” 理念的简单示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的 “视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

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

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

我们可以在官网 (vuex) 上直接下载vuex 。 在Vue之后引入vuex会进行自动安装：

在一个模块化的打包系统中，您必须显式地通过Vue.use()来安装 Vuex：

当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。

每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

实例演示

"运行案例" 可查看在线运行效果

代码解释 在 JS 代码第 4-8 行，通过 new Vuex.Store ({…}) 创建数据仓库。 在 JS 代码第 12 行，我们可以通过 store.state.count 访问仓库中定义的数据。

本节，我们带大家学习了 vuex 的基本概念。主要知识点有以下几点：

---