vuex 第三方包实现数据持久化的方法
作者:卖小女孩的小火柴 时间:2024-04-30 10:34:56
目的:
让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。
在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储。
如果有别的模块也需要持久化,也存储在本地
1)首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。
npm i vuex-persistedstate
2)然后:在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.js 和 cart.js
src/store/modules/user.js
// 用户模块
export default {
namespaced: true,
state () {
return {
// 用户信息
profile: {
id: '',
avatar: '',
nickname: '',
account: '',
mobile: '',
token: ''
}
}
},
mutations: {
// 修改用户信息,payload就是用户信息对象
setUser (state, payload) {
state.profile = payload
}
}
}
3)继续:在 src/store/index.js 中导入 user 模块。
import { createStore } from 'vuex'
import user from './modules/user'
export default createStore({
modules: {
user
}
})
4)最后:使用 vuex-persistedstate 插件来进行持久化
import { createStore } from 'vuex'
+import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'
export default createStore({
modules: {
user
},
+ plugins: [
+ createPersistedstate({
+ key: 'erabbit-client-pc-store',
+ paths: ['user']
+ })
+ ]
})
注意:
===> 默认是存储在localStorage中
===> key是存储数据的键名
===> paths是存储state中的那些数据,如果是模块下具体的数据需要加上模块名称,如user.token
===> 修改state后触发才可以看到本地存储数据的的变化。
总结:
基于第三方包实现vuex中的数据的持久化
触发持久化的条件是state发生变化
来源:https://juejin.cn/post/7006634698822680613
标签:vuex,数据持久化
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python Django中间件,中间件函数,全局异常处理操作示例
2022-02-18 20:21:40
![](https://img.aspxhome.com/file/2023/8/135178_0s.png)
PL/SQL数据类型及操作符
2009-02-26 11:17:00
解决Django no such table: django_session的问题
2022-04-13 22:06:21
![](https://img.aspxhome.com/file/2023/0/127710_0s.jpg)
安装mysql 8.0.17并配置远程访问的方法
2024-01-25 06:58:24
![](https://img.aspxhome.com/file/2023/1/124521_0s.png)
Opencv图像处理:如何判断图片里某个颜色值占的比例
2023-09-27 16:57:40
Python使用pandas导入csv文件内容的示例代码
2022-07-25 15:34:16
![](https://img.aspxhome.com/file/2023/7/110387_0s.png)
解决django 向mysql中写入中文字符出错的问题
2024-01-23 20:39:00
SQL Server 2022 AlwaysOn新特性之包含可用性组详解
2024-01-26 07:51:49
![](https://img.aspxhome.com/file/2023/0/98000_0s.png)
TensorFlow实现模型断点训练,checkpoint模型载入方式
2022-01-19 22:32:12
![](https://img.aspxhome.com/file/2023/4/80824_0s.jpg)
自定义django admin model表单提交的例子
2023-03-16 13:11:43
![](https://img.aspxhome.com/file/2023/4/89324_0s.jpg)
Mysql 命令行模式访问操作mysql数据库操作
2024-01-14 07:43:41
![](https://img.aspxhome.com/file/2023/0/120860_0s.jpg)
Django实现上传图片功能
2022-01-06 13:57:44
![](https://img.aspxhome.com/file/2023/4/66364_0s.jpg)
微信企业号开发之微信考勤百度地图定位
2024-05-08 10:11:47
![](https://img.aspxhome.com/file/2023/9/129019_0s.jpg)
Go各时间字符串使用解析
2023-06-25 02:15:17
Python实现文本特征提取的方法详解
2023-05-09 05:09:19
![](https://img.aspxhome.com/file/2023/4/112954_0s.png)
ASP伪静态页简单教程
2007-09-28 14:35:00
SQL和Oracle对数据库事务处理的差异性
2009-10-14 09:43:00
![](https://img.aspxhome.com/file/UploadPic/200910/20091014123631189.jpg)
pyinstaller打包单个exe后无法执行错误的解决方法
2023-08-08 09:50:26
Python+Tableau广东省人口普查可视化的实现
2022-02-12 21:53:59
![](https://img.aspxhome.com/file/2023/4/83764_0s.gif)
PHP未登录自动跳转到登录页面
2023-11-15 07:39:11
![](https://img.aspxhome.com/file/2023/4/91214_0s.png)