vuex组件 vuex-persistedstate

简介: vuex用于管理项目中的全局状态,但是我们一刷新vuex中保存的全局状态就会被全部初始化,虽然我们也可以同事缓存到storage中做两步操作,但是vuex-persistedstate组件已经帮我们完成了同步更新npm install vuex-persistedstate --save然后...

vuex用于管理项目中的全局状态,但是我们一刷新vuex中保存的全局状态就会被全部初始化,虽然我们也可以同事缓存到storage中做两步操作,但是vuex-persistedstate组件已经帮我们完成了同步更新

npm install vuex-persistedstate --save

然后用vuex中的plugins属性挂载

 
 
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  state,
  mutations,
  getters,
  plugins: [createPersistedState()]
})

在我们的localstorage中就会看到有一个vuex的key,值为{"showLogin":false,"navIndex":true,"token":"64c9bbf8541b47af8d891b20247ae6a3","nickName":"百宝箱","updataCart":false,"showLoading":false}的字符串的JSON数据

每次我们更新vuex的状态,localstorage中的vuex也会随之改变

API

createPersistedState([options])

使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件:

  • key <String>:存储持久状态的键。(默认:vuex

  • paths <Array>:部分持续状态的任何路径的数组。如果没有路径给出,完整的状态是持久的。(默认:[]

  • reducer <Function>:一个函数,将被调用来减少基于给定的路径持久化的状态。默认包含这些值。

  • subscriber <Function>:一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

  • storage <Object>:而不是(或与)getStatesetState。默认为localStorage。

  • getState <Function>:将被调用以重新水化先前持久状态的函数。默认使用storage

  • setState <Function>:将被调用来保持给定状态的函数。默认使用storage

  • filter <Function>:将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

自定义存储

如果在本地存储中存储Vuex存储的状态并不理想。人们可以轻松地实现功能使用cookie(或任何其他你可以想到的);

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

实际上,可以传递任何遵循存储协议(getItem,setItem,removeItem等)的对象:

// 用sessionStorage替换localStorage
createPersistedState({ storage: window.sessionStorage })

 

每一次的记录,都是向前迈进的一步
目录
相关文章
|
JavaScript
postcss pxtorem 配置
【8月更文挑战第9天】
|
开发框架 移动开发 小程序
【微信小程序】-- 配置uni-app的开发环境(四十八)
【微信小程序】-- 配置uni-app的开发环境(四十八)
|
11月前
|
机器学习/深度学习 人工智能 监控
探索 AI 在软件开发中的新角色:代码审查与质量保证
【10月更文挑战第22天】本文探讨了AI在软件开发中的新角色,特别是在代码审查和质量保证方面。AI通过静态代码分析、代码风格一致性检查和历史数据学习,提高代码审查的效率和准确性。在质量保证中,AI还能够自动生成测试用例、监控应用性能并持续优化。文章还讨论了AI在软件开发中的实践应用、挑战与机遇,以及实施的最佳实践。
|
机器学习/深度学习 自然语言处理 大数据
社交媒体的情感分析大数据模型
构建基于大数据的情感分析模型,利用Python和机器学习处理社交媒体数据。情感分析识别文本情感倾向,助力市场洞察和舆情监控。技术栈包括Python、NLP库(nltk, spaCy, TextBlob, VADER)、Scikit-learn、TensorFlow/PyTorch及大数据工具。数据收集(如Twitter API)、预处理(去除噪声、分词)、特征提取(TF-IDF、词嵌入)、模型训练(逻辑回归、BERT)是关键步骤。模型能捕捉文本情感,支持决策,随着技术进步,应用前景广阔。
1623 10
|
算法 数据可视化 数据挖掘
【目标检测】目标检测界的扛把子YOLOv5(原理详解+修炼指南)
Yolov5官方代码中,给出的目标检测网络中一共有4个版本,分别是Yolov5s、Yolov5m、Yolov5l、Yolov5x四个模型。 学习一个新的算法,最好在脑海中对算法网络的整体架构有一个清晰的理解。 但比较尴尬的是,Yolov5代码中给出的网络文件是yaml格式,和原本Yolov3、Yolov4中的cfg不同。 因此无法用netron工具直接可视化的查看网络结构,造成有的同学不知道如何去学习这样的网络。
4874 0
【目标检测】目标检测界的扛把子YOLOv5(原理详解+修炼指南)
|
JavaScript 前端开发
(详解)vue中实现主题切换的三种方式
(详解)vue中实现主题切换的三种方式
652 1
|
小程序 前端开发 Shell
CLI 发行uni-app到微信小程序,如何不打开微信开发者工具去进行小程序发布?(1)
CLI 发行uni-app到微信小程序,如何不打开微信开发者工具去进行小程序发布?(1)
CLI 发行uni-app到微信小程序,如何不打开微信开发者工具去进行小程序发布?(1)
|
JavaScript IDE 开发工具
Vue项目优化:编程规范|(一)Eslint + Prettier 统一代码风格
Vue项目优化:编程规范|(一)Eslint + Prettier 统一代码风格
562 0
vue2之vuex实现数据持久化(vuex-persistedstate)插件
vue2之vuex实现数据持久化(vuex-persistedstate)插件
855 0
|
小程序 搜索推荐 前端开发
uniapp开发微信小程序,从构建到上线(1)
uniapp开发微信小程序,从构建到上线(1)
uniapp开发微信小程序,从构建到上线(1)