vuex数据持续化(Vuex数据持久化实现的思路与代码)
类别:编程学习 浏览量:1325
时间:2022-04-01 01:11:57 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 = {} 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.stri.jpg" alt="vuex数据持续化(Vuex数据持久化实现的思路与代码)" border="0" />
调用方式:
import VuexPersist from "@/plugins/VuexPersist"; export default createStore({ plugins: [VuexPersist()], });
总结
到此这篇关于Vuex数据持久化实现的文章就介绍到这了,更多相关Vuex数据持久化内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vue-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue编程加入购物车(vuex实现简单的购物车功能)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vuex原理及使用方法(Vuex状态机的快速了解与实例应用)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)
- 小米音乐与 QQ 音乐合作,便捷迁移会员(小米音乐与QQ音乐合作)
- 小米推出米兔儿童电话手表奥特曼版,799 元,支持微信 QQ(小米推出米兔儿童电话手表奥特曼版)
- 贾怀胤唱《白龙马》 炸场 了 没想到京剧还能这么玩(贾怀胤唱白龙马)
- 白龙马的改编学生版,快来看看(白龙马的改编学生版)
热门推荐
- php加密平台(PHP7实现和CryptoJS的AES加密方式互通示例AES-128-ECB加密)
- js中作用域
- phpstudy不解析php代码(phpstudy伪静态设置的问题)
- 织梦各个模板对应的页面(织梦DEDECMS实现留言板调用模板头部及底部的方法)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- dockernginx怎么设置容器(docker nginx + https 子域名配置详细教程)
- 如何查找MySQL中查询慢的SQL语句
- MongoDB 日志文件太大
- 如何对python中列表中的数据运算(Python3.5集合及其常见运算实例详解)
- VS中Code Snippet 代码段
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9