vuex结合stroage使用

最新推荐文章于 2022-02-15 23:50:39 发布
最新推荐文章于 2022-02-15 23:50:39 发布
阅读量144 收藏
点赞数
分类专栏： vue易错 文章标签： vuex 状态管理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39308542/article/details/99414512
版权

在项目中有一些全局变量

1.如果只保存在vuex中，在页面进行刷新时，数据丢失

2.如果保存在session或者stroage中，数据变化，监听不到

希望结果：1.具有vuex通过单项数据流 set一个值 就会重新触发get 然后全局值就改变了 再重新渲染的功能

                   2.页面刷新数据不丢失

解决方法：vuex结合stroage

vuex获得数据：

同步straoge数据

 

 

zjr11111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
stroage
03-11
stroage
在vue中 storge 和vuex使用的用法区别
呐呐呐
08-28 1293
在vue中 storge 和vuex使用的用法区别 1.联动性：storge对于属性的改变不能触发其他页面的改动 storage： 存取login之后就不会改变的信息，比如userId， isAdmin(是否是管理员) vuex： 存取login之后可能在某个组件会改变的信息， 比如isInMyPort，isInPort 比如： 我在A页面改了userInfo 不经过刷新。b对他的调用并不知...
基于vue的uni-app框架之vuex+storage登录
qq_40001322的博客
12-13 2090
根据vuex全局状态管理+es6本地存储实现登录缓存以及token状态拦截 vuex-- import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { hasLogin: false, token: false,...
Vuex保持状态和WEBstorage存放信息搭配使用
weixin_64875794的博客
02-15 440
webstorage搭配vuex的使用攻略，简，速
vuex配sessionStorage进行自动存储，解决刷新数据丢失的问题。
xh1506101064的博客
12-11 1682
最近在重构以前的老代码，发现上一个前端都是直接用sessionStorage.setItem做的数据存储，对于Vuex也没有做一个持久化的存储，刷新就没了。 于是我对这个重新做了一个处理。 大致是这么想的， 第一点：我想每次修改store里面的数据的时候，sessionStorage就自动存储更新一遍，而不是我手动去更新sessionStroage里面的数据。 我的做法是：使用vuex的 subscribe 订阅。 因为要修改store里面的数据，会调用到mutation 。而subscribe是订阅 st
在vue中使用vuex和session Storage保存用户登录状态
一路向北
09-08 8898
1.安装vuex 使用npm包管理工具来安装Vuex，命令格式如下所示： npm install vuex --save 在命令中加上-save是因为这个包需要在生产环境中使用 更多安装方式请参考：Vuex 安装 2.安装完成后构建如下目录 vuex的目录结构： getters => 从基本数据派生的数据 mutations => 提交更改数据的方法，同步！ ...
vuex和sessionstorage的区别
chengzi_jiaotang的博客
11-10 1062
下面看戏vuex存储和本地存储(localstorage、sessionstorage)的区别 1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地 2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。 3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。 注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一
vuex和sessionStorage使用有感
王雪亮
08-23 3175
一.vuex和sessionStorage单独使用 用户发送登录请求(成功) 用户相关信息存到sessionStorage中 加载菜单状态置为false，存放到vuex中 跳转到首页(/) router.beforeEach拦截 若访问login 未认证，跳转到login (sessionStorage是否有user) 已认证，跳转到首页 若访问首页 未...
vue中使用vuex结合sessionStorage做的登录功能
hjhfreshman的博客
07-11 9916
最近做项目需要保存用户登录状态，要做到刷新页面用户状态不变，以及实现登出功能。实际上是很简单的，但是对于vue新手来说，我找了好几个网址都讲的不是很清楚，磕磕绊绊理清了关系，在这里总结一下。首先，vuex安装完成之后，构建如下目录： vuex目录结构 这样做的目的是降低代码的耦合度，方便以后的修改与维护。然后，vuex中几个文件详情如下...
华为 HCNP-Stroage V4.0 资深存储工程师官方认证教材
11-08
华为 HCNP-Stroage V4.0 资深存储工程师官方认证教材
stroage-源码.rar
10-10
stroage-源码.rar
usb mass stroage 的4个文档
10-20
usb mass stroage 的4个文档， 在这儿给大家分享，当初找了好半天，对开发USB 驱动有帮助
华为认证HCIP-Stroage V4.0 资深存储工程师官方认证教材与实验手册
09-22
最新华为认证HCIP-Stroage V4.0 资深存储工程师认证教材与实验手册全六册完整版，非常适合考试学习下载
vuex和localStorage实现购物车的长期保存@帅名
godming的博客
11-01 1208
1.首先简单封装一个localStorage()方法： const storage = { set(key, value){ // 调用这个方法时候传入一个 key 和 value // 将传入的 value 转换成JSON 字符串 localStorage.setItem(key,JSON.stringify(value)) ...
关于sessionStorage存储数据例子vue
热门推荐
gang456789的博客
09-20 1万+
我们在vue中，经常通过事件携带着参数来进行处理，有时候还需要将这些数据存储起来，一般有vuex，sessionStorage，localStorage进行存储，其中vuex存储只要当我们刷新页面数据就会丢失，这当然不是我们想要的结果；在看sessionStorage，它有只要页面不关闭，不手动删除数据，数据就会一直存在，现在貌似存储量为4兆左右；最后localStorage，它的特点是，除非我们手
详解vue中vuex的产生原因和使用方法
chaopingyao的博客
03-12 584
学习一个新技术，必须要清楚三个W，即What 、Why以及how。只有当你了解了Vuex的What 和Why，才会研究how。 1、vuex 是什么？（what） 官方文档介绍：Vuex是一个专门为vue.js设计的集中式状态管理模式，用来管理Vue的所有组件状态。也可以认为Vuex就是vue为了方便数据的操作而建立的一个“前端数据库”。 2、为什么要使用vuex？（why） （1）现象 当在开发...
cookies，sessionStroage和localStorage的区别
春虫虫丶丶丶的博客
07-18 2439
a)      Cookie数据始终在同源的http请求中携带（不管需要不需要）， 即cookie在浏览器和服务器之间来回传递。而sessionStorage和localStroage不会自动把数据发送给服务器，仅在本地保存。Cookie数据还有路径的概念，可以限制保存在某个路径下； b)      存储大小限制也不同，cookie数据不能超过4k，同时因为每次Http请求都会携带cookie，
解决vuex页面刷新导致数据丢失问题
weixin_30483697的博客
08-19 116
vuex是大家使用vue时大多数都会选择的，但是当页面刷新之后vuex数据会丢失，因为页面刷新之后代码重新加载这样vuex的数据自然就会为空。怎么解决这个问题呢？vuex自身好像没有太好的解决方案,但是我们可以利用localStorage和sessionStorage对数据进行保存。这样这个问题就解决了。这个方法比较简单但是其实这样做就和vuex没有太大的关系了，我们可以将数...
vue异步数据影响页面渲染
weixin_39308542的博客
06-20 3527
今天遇到一个问题，要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中，而在页面渲染时session中还没有user，页面直接报错。 因此我希望能在所有请求都得到后再去做页面的渲染。 1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏，避免渲染 2.写计数器，每1ms进行一次查询，如果session...
stroage 监听
最新发布
03-16
Storage监听是指在计算机系统中对存储设备进行监控和管理的一种技术。通过Storage监听，可以实时监测存储设备的状态、容量、读写速度等信息，并对存储设备进行管理和优化。 在操作系统或存储系统中，可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值