vuex 第三方包实现数据持久化的方法

2024-04-11 14:49:49

目的：

让在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发生变化

到此这篇关于vuex 第三方包实现数据持久化的方法的文章就介绍到这了,更多相关vuex 数据持久化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vuex数据持久化实现的思路与代码

什么是vuex vuex :是一个专为vue.js开发的状态管理器,采用集中式存储的所有组件状态五个属性: state.getters.mutations.actions.module 基本使用: 新建store.js文件,最后在main.js中引入,并挂载到实列上 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {} const getters = {} const mutations = {
vuex数据持久化的两种实现方案

目录业务需求: 方案一:vuex-persistedstate 方案二:vuex-persist 总结业务需求: 在基于vue开发SPA项目时,为了解决页面刷新后数据丢失的问题,我们一般都是将数据存储在localstorage或sessionstorage中:当数据需要全局处理统一管理时,我们也会借助于vue官方提供的vuex来进行数据的统一管理.vuex相比localstorage或sessionstorage来说,存储数据更安全些.与此同时,vuex也存在一些弊端,当页面刷新后,vuex
VUEX 数据持久化,刷新后重新获取的例子

VUEX 数据持久化 // store.js getters: { userInfo(state) { console.log('getters',state); if (!state.userInfo.id) { let token = getStorage("token"); console.log('token',token); if (token) { let userInfo = getStorage("userInfo"); state.userInfo
vuex 第三方包实现数据持久化的方法

目的: 让在vuex中管理的状态数据同时存储在本地.可免去自己存储的环节. 在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储. 如果有别的模块也需要持久化,也存储在本地 1)首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化. npm i vuex-persistedstate 2)然后:在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.js 和 cart.js
iOS用两行代码完美解决数据持久化

前言在实际的iOS开发中,有些时候涉及到将程序的状态保存下来,以便下一次恢复,或者是记录用户的一些喜好和用户的登录信息等等. 这就需要涉及到数据的持久化了,所谓数据持久化就是数据的本地保存,将数据从内存中迁入到存储器上.网上有很多种数据持久化的方法,如实现自己实现I/O.数据库.云或则走第三方接口等等.但是有时候可能只是进行一些简单的数据存储,如用户的偏好设置.用户的sessionID等等,这时候使用上述方法便显得有点兴师动众了,现在需要一种更加轻量化的操作方式. 一.认识 NSUserDef
python学习之第三方包安装方法（两种方法）

这篇文章主要介绍了python学习之第三方包安装方法,最近在学习QQ空间.微博(爬虫)模拟登录,都涉及到了RSA算法.这样需要下一个RSA包(第三方包),在网上搜了好多资料,具体有以下两种方法: 第一种方法(不使用pip或者easy_install): Step1:在网上找到的需要的包,下载下来.eg. rsa-3.1.4.tar.gz Step2:解压缩该文件. Step3:命令行工具cd切换到所要安装的包的目录,找到setup.py文件,然后输入python setup.py install
Android数据持久化之读写SD卡中内容的方法详解

本文实例讲述了Android数据持久化之读写SD卡中内容的方法.分享给大家供大家参考,具体如下: 前面文章里讲的那三个方法:openFileOutput .openFileInput 虽然都能通过流对象OutputStream和InputStream可以处理任意文件中的数据,但与 SharedPreferences 一样,只能在手机内存的指定目录下建立文件,因此,在实际的开发使用中有很大的局限性,那么在这一节中,我们来看一个比较高级的方法来实现数据的持久化--读写SD卡上的内容. --读取ass
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)

anaconda 集成了很多科学计算中所需要的包,如numpy,scipy等等,具体查看anaconda中已经预先安装配置好的包有哪些,可以通过cmd命令,输入conda list 查看,如下图所示: 但是,因为实际需求,我们会需要导入列表中没有的第三方包,如gemsim,在anaconda中,我们可以参考以下步骤安装所需要的第三方包: 1.启动anaconda 命令窗口: 开始 > 所有程序 > anaconda >anaconda prompt 2.安装gens
python自动重试第三方包retrying模块的方法

retrying是一个python的重试包,可以用来自动重试一些可能运行失败的程序段,retrying提供一个装饰器函数retry,被装饰的函数就会在运行失败的情况下重新执行,默认只要一直报错就会不断重试. 最近写了一个爬虫,需要连接国外的一个网站,经常出现掉线的情况,自己写了一个自动重连的代码,但感觉不够简洁... 后来就上万能的github,找到了一个第三包,基本能满足我的要求.这个第三方包就是retrying. 我的需求就是每当出现request相关异常的时候,就自动重来,上限连接10次:
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法

virtualenv简介含义: virtual:虚拟,env:environment环境的简写,所以virtualenv就是虚拟环境,顾名思义,就是虚拟出来的一个新环境,比如我们使用的虚拟机.docker,它们都是把一部分的内容独立出来,这部分独立的内容相当于一个容器,在这个容器只呢个,我们可以"为所欲为"----安装需要的依赖包,软件..,同时这个容器是与外界相互独立的,容器与容器直接也是互相独立不影响. 为何要用虚拟环境: [前提概要] Django也是一个非常流行的web框架.
Laravel第三方包报class not found的解决方法

出现的问题公司开发使用PHP,技术框架使用Laravel.最近线上出现一个问题,就是上线之后,每次都会出错.查看出错原因,是composer安装的第三方出现class not found.因为这个问题,在线下使用Lumen框架的时候,遇到过,查找问题原因是因为依赖的composer包中composer.json中的"autoload":{"psr-4":{}}书写格式问题.解决方法使用命令:composer dump-autoload -o; 虽然知道问题的所在,

vuex 第三方包实现数据持久化的方法

目的：

总结：

相关推荐

随机推荐