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

2024-04-18 09:33:55

什么是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 = {}
   const actions = {}
   export default new Vuex.Store({
       state,
       getters,
       mutations,
       actions

   })

state属性：存放状态，例如你要存放的数据

getters：类似于共享属性，可以通过this.$store.getters来获取存放在state里面的数据

mutations：唯一能改变state的状态就是通过提交mutations来改变，this.$store.commit()

actions: 一步的mutations，可以通过dispatch来分发从而改变state

Vuex 数据持久化

众所周知，Vuex 的数据是存储在内存中的，刷新一下网页这些数据就会丢失。而有些数据我们希望刷新后仍然能够留存，这就需要把数据存储下来。这里就记录一下，使用 localStorage 来持久化 Vuex 中的数据。

实现思路

因为 state 中的数据理论上只能通过 mutation 来进行更新，所以可以监听 mutation 事件，在每次事件执行后，将此时整个 state 的数据转为字符串后存储进 localStorage。
在页面初始化 state 时，读取 localStorage 值，重新转为 JSON 后，合并进当前 state。
这种方法只是一个简单的实现，只适用于简单对象，对复杂对象来说，重新转为 JSON 可能会失去对应的事件和方法，后面可以考虑以其他方式存储。

代码

插件：

export default (options = {}) => {
  const storage = options.storage || (window && window.localStorage);
  const key = options.key || "vuex";

  // 获取state的值
  const getState = (key, storage) => {
    const value = storage.getItem(key);
    try {
      return typeof value !== "undefined" ? JSON.parse(value) : undefined;
    } catch (err) {
      console.warn(err);
    }
    return undefined;
  };

  // 设置state的值
  const setState = (key, state, storage) =>
    storage.setItem(key, JSON.stringify(state));

  return (store) => {
    // 初始化时获取数据，如果有的话，把原来的vuex的state替换掉
    const data = Object.assign(store.state, getState(key, storage));
    if (data) {
      store.replaceState(data);
    }

    // 订阅 store 的 mutation。handler 会在每个 mutation 完成后调用，接收 mutation 和经过 mutation 后的状态作为参数
    store.subscribe((mutation, state) => {
      setState(key, state, storage);
    });
  };
};

调用方式：

import VuexPersist from "@/plugins/VuexPersist";

export default createStore({
  plugins: [VuexPersist()],
});

总结

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

详解vuex持久化插件解决浏览器刷新数据消失问题

众所周知,vuex的一个全局状态管理的插件,但是在浏览器刷新的时候,内存中的state会释放,通常的解决办法就是用本地存储的方式保存数据,然后再vuex初始化的时候再赋值给state,手动存再手动取会觉得很麻烦,这个时候就可以使用vuex的插件vuex-solidification 插件地址: vuex-solidification, 欢迎star 插件原理 vuex有一个hook方法:store.subscribe((mutation, state) => {}) 每次在mutation方法执
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题

页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. 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的肯定会有这样一个痛点,就是刷新以后vuex里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的. 所以我们通过 vuex-persistedstate这个插件,来实现将数据存储到本地用法很简单 1. npm install vuex-persistedstate 2. import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ modules:
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中管理的状态数据同时存储在本地.可免去自己存储的环节. 在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储. 如果有别的模块也需要持久化,也存储在本地 1)首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化. npm i vuex-persistedstate 2)然后:在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.js 和 cart.js
vuex中数据持久化插件vuex-persistedstate使用详解

目录数据持久化vuex-persistedstate使用安装起步配置使用自定义存储方式想使用cookie同理使用vuex-persistedstate插件遇到的问题数据持久化vuex-persistedstate使用 vuex是在中大型项目中必不可少的状态管理组件,刷新会重新更新状态,但是有时候我们并不希望如此.例如全局相关的,如登录状态.token.以及一些不常更新的状态等,我们更希望能够固化到本地,减少无用的接口访问,以及更佳的用户体验. 安装起步 npm i vuex-per
iOS用两行代码完美解决数据持久化

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

# 配置vuex和在vue中相同,只是mpvue有一个坑,就是不能直接在new Vue的时候传入store. 步骤: 1.在src目录下新建一个store目录,结构如下(官方推荐: vuex.vuejs.org/zh-cn/struc-) 2. 在main.js中引入你的store, 并绑定到Vue构造函数的原型上,这样在每个.vue的组件都可以通过this.$store访问store对象. 3. ok,可以使用了.我说一下vuex官方推荐的使用方案(可适应大型应用). 首先在mutation
详解刷新页面vuex数据不消失和不跳转页面的解决

先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题刷新刷新相当与重启项目,之前获取到的数据也只是通过store暂存起来,项目关闭时就不见了,这有些像电脑重启,存储在RAM的数据会消失.但是储存在sessionstorage.localstorage和cookie里的内容不会消失. Vuex 方法思路首先得熟悉vuex,官网中介绍 Vuex 是一个专为 Vue.
解决vuex数据页面刷新后初始化操作

在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 1.利用storage缓存来实现vuex数据的刷新问题我们可以在mutation等vuex的方法中对于数据进行改变时,将数据同时存储进我们的本地浏览器缓存中:下面是我在mutation中写的方法: 同步将数据的更改保存,也可以在页面调用vuex的mutation方法时同步更改:但是这种方法只能针对少量的数据需要保持不刷新,在真正的卡发中并不适用
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

vuex数据改变,组件中页面不渲染相信许多vuex新手都会遇到这样的问题: vuex数据更新后,插件中使用数据的地方没有更新这样的代码 data() { return { tableData: this.$store.state.AdminInfo }; } 然后在 template 中使用 tableData <el-table :data="tableData" class="tablePst"> <el-table-column labe

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

什么是vuex

Vuex 数据持久化

总结

相关推荐

随机推荐