首页 > 其他分享 >vuex 使用 vuex-persistedstate 数据持久化

vuex 使用 vuex-persistedstate 数据持久化

时间:2023-05-15 11:35:18浏览次数:31  
标签:持久 val Vuex state persistedstate import vuex

1、安装

npm i vuex-persistedstate
yarn add vuex-persistedstate

2、在store.js中引入

import createPersistedState from "vuex-persistedstate"

举例:

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        userInfo:{},
        MetaMaskProvider : 'ethereum',
        NaboxProvider : 'NaboxWallet',
    },
    actions:{

    },
    mutations:{
        setUserInfo(state, val){
            state.userInfo = val.val
        },
    },
    plugins: [createPersistedState({
        key: 'userinfor',
        storage: window.localStorage,
    })]
})


export default store

得到:

 

标签:持久,val,Vuex,state,persistedstate,import,vuex
From: https://www.cnblogs.com/tlfe/p/17401355.html

相关文章

  • Redis 持久化方式
    参考:小林coding https://xiaolincoding.com/redis/storage/aof.html#aof-%E9%87%8D%E5%86%99%E6%9C%BA%E5%88%B6https://www.cnblogs.com/lovezhr/p/15886823.html AOF(AppendOnlyFile)如果Redis 每执行一条写操作(不会记录读操作命令)命令,就把该命令 以追加的方式写入到......
  • xstate在vue中像vuex/pinia那样管理数据
    //store.jsimport{assign,createMachine,interpret}from'xstate'import{useActor}from'@xstate/vue'constcounterMachine=createMachine({id:'counter',context:{count:0,},initial:'idle',......
  • pinia数据持久化
    方式一使用vueuse提供的hook函数useSessionStorage和useLocalStorage,可以实现对某个变量的持久话安装vueuse库npmi@vueuse/core在stoer中使用import{useLocalStorage}from'@vueuse/core'exportconstuseUserStore=defineStore('userStore',{state:()=>......
  • redis持久化之AOF
    1.什么是AOF:AOF(AppendOnlyFile):以日志的形式来记录每个写操作,将redis执行过的所有写指令记录下来(读操作不记录),只允许追加文件不允许改写文件,redis启动时会读取该文件重新构建数据。即:redis重启的话就根据日志文件的内容将写指令从前到后执行一次以完成数据的恢复工作。但......
  • vuex
    一、vuex理解https://vuex.vuejs.org/zh/guide/mutations.html vuex是组件状态管理,使用的是store容器去储存组件状态https://blog.csdn.net/m0_70477767/article/details/125155540详细介绍以及下载加入实例想要更改store中的状态唯一方法是提交mutation,mutation是同步操作,a......
  • 使用vue2+element-ui+vuex实现后台管理系统的头部背景色动态点击修改
    **以下内容仅供自己学习使用话不多说,直接上代码1.首先去vuex里面importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);conststore=newVuex.Store({state:{headerColor:'default-header',//定义一个默认的颜色},mutations:{ //setHe......
  • 2、负载均衡服务LVS的NAT、DR、TUNNEL搭建流程及LVS 持久连接、防火墙标记
    LVS的NAT模式实战案例(支持端口映射)环境如下:一台:internetclient:192.168.10.123/24GW:无仅主机一台:lvseth1仅主机192.168.10.100/24eth0NAT10.0.0.100/24两台RS:RS1:10.0.0.8/24GW:10.0.0.2NATRS2:10.0.0.18/24GW:10.0.0.2NAT配置如下第一步:在LVS机器......
  • vue中 vuex踩坑笔记-刷新后动态路由不渲染
    在vue中,vuex经常用于存储公共状态,特别是在登录的时候获取token再保存,这个时候如果是做的动态路由,由于vuex的特性在你刷新后会清除你的所有操作的存储。这时候,存储的token和动态路由都会被清掉。如何解决这个问题:1.结合session或者cookie(通常用这个),token保存的时候,除了在vuex中......
  • Rabbitmq介绍,安装,基于queue实现消费者生产者,基本使用,消息安全,持久化,闲置消费,发布订阅,
    内容详细Rabbmit介绍消息队列中间件概念很大,准确一些叫消息队列中间件消息队列中间件使用redis当作消息队列来用,blpop阻塞式弹出,实现队列,先进先出MQ,消息队列,MessageQueue是什么?消息队列就是基础数据结构中先进先出(队列)的一种数据机制,类比于生活中,买东西,需要排队,先排队的人......
  • redis的持久化
    ################################ save[work@a8-cloud-dba-db08~]$redis-cli-aroot-p6381127.0.0.1:6381>saveOKsave命令对应的日志:[work@a8-cloud-dba-db08log]$tail-fredis.log4467:M06May202323:02:02.803*DBsavedondisk bgsave[wor......