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

目的:

让在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 数据持久化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-13

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 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

Android实现listview动态加载数据分页的两种方法

在android开发中,经常需要使用数据分页,比如要实现一个新闻列表的显示,或者博文列表的显示,不可能第一次加载就展示出全部,这就需要使用分页的方法来加载数据,在android中Handler经常用来在耗时的工作中,它接收子线程发送的数据,并使用数据配合更新UI,AsyncTask是在一个线程中执行耗时操作然后把结果传给UI线程,不需要你亲自去管理线程和句柄. 一.使用Handler+线程方法 1.基础知识 Handler在android系统中,主要负责发送和接收消息,它的用途主要有以下两种:

解析Android截取手机屏幕两种实现方案

最近在开发的过程中,遇到了一个需要截取屏幕保存为图片的需求,具体为截取webview的视图保存图片. 方法1:首先想到的思路是利用SDK提供的View.getDrawingCache()方法: public void printScreen(View view) { String imgPath = "/sdcard/test.png"; view.setDrawingCacheEnabled(true); view.buildDrawingCache(); Bitmap bitmap

Struts2中validate数据校验的两种方法详解附Struts2常用校验器

 1.Action中的validate()方法 Struts2提供了一个Validateable接口,这个接口中只存在validate()方法,实现这个接口的类可直接被Struts2调用,ActionSupport类就实现了Vadidateable接口,但他的validate()方法是一个空方法,需要我们来重写. validate()方法会在execute()方法执行前执行,仅当数据校验正确,才执行execute()方法, 如错误则将错误添加到fieldErrors域中,如果定义的Action中

浅谈vue项目用到的mock数据接口的两种方式

1.使用devServer.before进行数据mock //通过配置devServer.before选项,设置url访问路径及response响应数据,进行mock数据. const { data } = require('./data.json') // 引入json数据对象 //vue.config.js配置文件中进行Vue CLI的配置 module.exports = { //... devServer: { before: function(app, server) { app.ge

mysql清空表数据的两种方式和区别解析

在MySQL中删除数据有两种方式: truncate(截短)属于粗暴型的清空 delete属于精细化的删除 删除操作 如果你需要清空表里的所有数据,下面两种均可: delete from tablename; truncate table tablename; 而如果你只是删除一部分数据,就只能使用delete: delete from tablename where case1 and case2; 区别 在精细化的删除部分数据时,只能使用delete. 而清空所有表数据时,两者均可,此时这两

Android平台中实现数据存储的5种方式

本文介绍Android中的5种数据存储方式,具体内容如下 数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是: 1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 4 使用ContentProvider存储数据 5 网络存储数据 下面将为大家一一详细介绍.  第一种:使用SharedPreferences存储数据 SharedPreferences是Android平台上一个轻量级的存储类,主要是保存一

Python更新数据库脚本两种方法及对比介绍

最近项目的两次版本迭代中,根据业务需求的变化,需要对数据库进行更新,两次分别使用了不同的方式进行更新. 第一种:使用python的MySQLdb模块利用原生的sql语句进行更新 import MySQLdb #主机名 HOST = '127.0.0.1' #用户名 USER = "root" #密码 PASSWD = "123456" #数据库名 DB = "db_name" # 打开数据库连接 db=MySQLdb.connect(HOST,U

Android数据持久化之Preferences机制详解

本文实例讲述了Android数据持久化之Preferences机制.分享给大家供大家参考,具体如下: 在Android中,实现数据持久化有五种方式:Preferences,文件File,I/O操作.SQLite数据库,ContentProvider组件. 下面逐个做一简单的介绍: 一.Preferences的介绍: Preferences是一种轻量级的数据存储机制,他将一些简单的数据类型的数据,包括boolean类型,int类型,float类型,long类型以及String类型的数据,以键值对的

webstorm中配置Eslint的两种方式及差异比较详解

写在前面 这两种方式的配置基本相同,都是配一下node地址,Eslint执行文件的地址,Eslint的配置文件(就是.eslintrc)等,而且网上很方便就可以搜索到,就不多说了. 之所以要比较一下两者的差异,就是因为对于没有配置过的同学来说,看了诸如"怎么在webstorm下配置Eslint"的问题下面的回答,既有说用方式1,又有说方式2的,然后这两种方式配置项还差不多(都是在webstorm的一个setting页面里面设置三四个项目,然后勾上enable复选框),就容易混淆. 再加