全国咨询热线:400-123-4567

鲜之友微信小程序_解决vuex改写数据消失问题

类别:企业动态 发布时间:2021-01-05 浏览人次:

解决vuex刷新数据消失问题       这篇文章主要介绍了解决vuex刷新数据消失问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

前言

vue构建的单页大型项目中,可能会用到Vuex 。Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

但是有一个问题就是:vuex的存储的数据只是在页面的中,相当于我们定义的全局变量,刷新之后,里边的数据就会恢复到初始化状态。但是这个情况有时候并不是我们所希望的。

比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加?

解决思路:

监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStorage/localStorage中。

页面打开之后,判断sessionStorage/localStorage中是否存在state对象,如果存在,则说明页面是被刷新过的,将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。

如果不存在,说明是第一次打开,则取vuex中定义的state初始值。

sessionStorage和localStorage介绍

H5提供了我们常用的localStorage和sessionStorage。

两者的区别:localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。

存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行)

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem、removeItem、clear等。

代码:

项目目录结构:

在项目的入口页面(App.vue)里添加监听刷新事件:

name: 'App',
 mounted () {
 window.addEventListener('unload', this.saveState)
 methods: {
 saveState () {
 sessionStorage.setItem('state', JSON.stringify(this.$store.state))
 }

store里有可能存储了一些涉密的信息,所以一直在 sessionStorage放着不是太好,页面加载完成后,清空或者删除指定的session。

 window.addEventListener("load", () = {
 sessionStorage.clear();
 });

state.js:

var state = sessionStorage.getItem('state') JSON.parse(sessionStorage.getItem('state')) : {
 count: 1,
 obj: {},
 arr: [1, 2, 3]
export default state

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './states'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
 state,
 mutations,
 getters,
 actions
})

mutations.js:

import {
 SOME_MUTATION
} from './mutation-types.js'
export default {
 [SOME_MUTATION] (state) {
 state.count++
}

mutation-types.js

export const SOME_MUTATION = 'SOME_MUTATION'

补充知识:vuex-along有效防止刷新页面后vuex中的数据重置

1.vuex-along安装

npm i vuex-along --save

2.在store目录下的index.js文件中引入

2.1

import {createVuexAlong} from 'vuex-along'

2.2直接上图

简单说明其中的含义:

name:“”“”

//在这块我存入的是localstorage,代表localstorage的键值

local:{list:["userInfo"],isFilter:true}

//list:要过滤的vuex中的数据,isFilter代表将userInfo滤过,其余存进localstorage

session:false

//对于sessionstorage不进行任何操作

更加

3.以上这篇解决vuex刷新数据消失问题就是小编分享给大家的全部内容了,希望对各位将来的大佬有所帮助!也希望大家多多支持凡科。


推荐阅读

【上海网站优化】这样才能让百度中意你

您的部位: > 新闻报道新闻资讯 > 企业网站建设 > 【上海市seo优化】那样才可以让百度搜索钟意你新的一年里seo优化该怎样做才能让百度搜索钟意你,在2018有许多朋友问网编,为何一些...

2021-01-12
小程序发布流程_详解angularJs中自界说directive的数

详细说明angularJs中自定directive的数据信息互动 本文关键详细介绍了详细说明angularJs中自定directive的数据信息互动,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一...

2021-01-12
小程序界面设计模板_JavaScript自界说文本框光标

JavaScript自定文字框鼠标光标 文字框(input或textarea)的鼠标光标没法改动款式(除开根据color改动鼠标光标色调)。但小编期待本人建立自身的网站时,文字框的鼠标光标有归属于...

2021-01-12
网站推行需求剖析的根本数据目标【凡科】广州

重要词:网站实行要求分析的压根数据信息总体目标 现有 13 人访问 为何要开展网站数据信息分析?1、立即把握网站实行的实际效果,减少盲目跟风性;2、分析各种各样互联网营销推广...

2021-01-12
网站制作,专题活动网站建设

主题活动企业网站建设的要求 主题活动网站怎样反映特点,精准定位爱好群体? 主题活动网站怎样用品牌形象化的語言呈现商品的特点? 主题活动网站怎样吸引住潜在用户选购? 主题...

2021-01-12
解读《百度移动搜索建站优化白皮书》

百度搜索惊雷优化算法不久不久,又接到了百度搜索搜狗引擎建网站提升市场研究报告。以便让众多网站站长充足掌握百度搜索检索模块标准,并依据标准有效安全性基本建设网站、提...

2021-01-12
X

400-8700-617400-123-4567
企业邮箱1497847554@qq.com
官方微信