数据持久化vuex-persistedstate使用
JackieDYH 人气:6数据持久化vuex-persistedstate使用
vuex是在中大型项目中必不可少的状态管理组件,刷新会重新更新状态,但是有时候我们并不希望如此。例如全局相关的,如登录状态、token、以及一些不常更新的状态等,我们更希望能够固化到本地,减少无用的接口访问,以及更佳的用户体验。
安装起步
npm i vuex-persistedstate --save
目前的环境版本:
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.4.0",
"vuex-persistedstate": "^3.0.1",
vuex已经升级到了3,看了release note没有发现太过分的升级,预计不会出现不兼容的情况,有感兴趣的小伙伴可以升级体验一下。
配置使用
在vuex初始化时候,作为组件引入。
import persistedState from 'vuex-persistedstate' export default new Vuex.Store({ // ... plugins: [persistedState()] })
自定义存储方式
vuex-persistedstate默认使用localStorage来固化数据,一些特殊情况要如何应对呢?(如:safari的无痕浏览模式)
需要使用sessionStorage的情况
plugins: [ persistedState({ storage: window.sessionStorage }) ]
使用cookie的情况
import persistedState from 'vuex-persistedstate' import * as Cookies from 'js-cookie' export default new Vuex.Store({ // ... plugins: [ persistedState({ storage: { getItem: key => Cookies.get(key), setItem: (key, value) => Cookies.set(key, value, { expires: 7 }), removeItem: key => Cookies.remove(key) } }) ] })
想使用cookie同理
默认持久化所有state
指定需要持久化的state,配置如下
import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage, reducer(val) { return { // 只储存state中的assessmentData assessmentData: val.assessmentData } } })]
vuex引用多个插件的写法
譬如:vuex提示的插件和持久化的插件一起使用,配置如下
import createPersistedState from "vuex-persistedstate" import createLogger from 'vuex/dist/logger' // 判断环境 vuex提示生产环境中不使用 const debug = process.env.NODE_ENV !== 'production' const createPersisted = createPersistedState({ storage: window.sessionStorage }) export default new Vuex.Store({ // ... plugins: debug ? [createLogger(), createPersisted] : [createPersisted] })
plugins要是一个一维数组不然会解析错误
使用vuex-persistedstate插件遇到的问题
这是一个做持久化的插件:vuex-persistedstate
我在做项目时,遇到一个问题,就是做下面这个功能,渲染数据的时候,因为这个数据好多个地方使用,所以呢,把它存到了vuex里面。vuex 是将数据存到了浏览器的内存中,刷新就没了
这行代码是写在vuex里面的,就是说,我直接从本地去拿数据
list: JSON.parse(window.localStorage.getItem('abc')).category.list || []
直接看下代码: 我一开始是这样想的,既然我vuex中有数据了,不用计算属性行不行,直接渲染,确实可以渲染,但是品牌这一项咋渲染呢,push行不通啊,那就只能把结构写死,但是页面效果就不对了,所以这个地方用计算属性,第一,动态的取到前两项,第二,可以动态的添加新的 li 结构。
计算属性使用的场景:有数据啦,但不是我想要的格式,要加工加工
setup () { const brand = reactive({ id: 'brand', name: '品牌', children: [{ id: 'brand-children', name: '品牌推荐' }] }) const store = useStore() const cateList = computed(() => { const list = store.state.category.list.map(item => { return { id: item.id, name: item.name, children: item.children && item.children.slice(0, 2) } }) list.push(brand) return list }) return { cateList } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容