admin 管理员组文章数量: 1184232
Vuex
目录
一、Vuex为什么要持久化?
二、vuex持久化实现步骤
1. 安装
2. 配置仓库store
三、存储不同模块数据
1. 获取指定模块state数据
2. 获取全局state和模块数据
3. 只存储state全局数据
四、API方法
一、Vuex为什么要持久化?
原因：因为Vuex是基于内存，存在内存里面的，刷新网页之后就没有了，不会持久化储存
解决方案：以token举例(存储登录信息)
实现思路：只要Vuex中的数据发生变化，就自动往本地同步一份
二、vuex持久化实现步骤
1. 安装
1）安装一个vuex的插件 vuex-persistedstate 来支持vuex的状态持久化
// npm安装命令:npm i vuex-persistedstate --save// yarn安装yarn add vuex-persistedstate注意: 该插件应是生产依赖包, 所以要 -S
在package.json中
2. 配置仓库store
2）在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js
import Vue from 'vue'
import Vuex from 'vuex'
import loginModule from './modules/loginModule'
import createPersistedstate from 'vuex-persistedstate'Vue.use(Vuex)export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {loginModule},plugins:[createPersistedstate({key:'user',// 存数据的key名 自定义的 要有语义化// paths: ['loginModule'] // 要把那些模块加入缓存}) ]
})
三、存储不同模块数据
1. 获取指定模块state数据
2. 获取全局state和模块数据
3. 只存储state全局数据
四、API方法
createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：
key ：存储持久状态的键。（默认：vuex）
paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）
reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。
subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
storage ：而不是（或与）getState和setState。默认为localStorage。
getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。
setState ：将被调用来保持给定状态的函数。默认使用storage。
filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true
本文标签： Vuex
版权声明：本文标题：Vuex 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687043676a57966.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论