这篇文章给大家分享的是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有更好的支持。浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(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不进行任何操作

    以上就是vuex中刷新数据消失的问题的解决方法，需要的朋友可以参考，希望对大家有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Node.js进程集群内容如何理解，有哪些要点

  这篇文章介绍了Node.js进程管理之进程集群，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• 在JS中怎么实现拖拽排序，方法是什么

  这篇文章主要介绍了js 实现拖拽排序，拖拽排序对于小伙伴们来说应该不陌生，平时工作的时候，可能会选择使用类似Sortable.js这样的开源库来实现需求。但在完成需求后，大家有没有没想过拖拽排序是如何实现的呢？感兴趣得话一起来看看下面文章得小心内容吧

• vue中怎样实现图片上传且可以修改的功能

  前几天做到一个关于图片上传功能,下面这篇文章主要给大家介绍了关于vue使用element实现上传图片和修改图片功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

• 用js怎样实现筛选出符合要求的数组？

  有时候我们会遇到对数组进行筛选的需求，例如在一组输入的数字中，筛选出符合要求的数组，那么这用JavaScripy要怎样实现呢？下面就给大家分享一下js实现筛选数组的代码。

• 用JavaScript怎样求对数，都有哪些方法？

  这篇文章给大家分享的是用JavaScript怎样求对数的方法，文中给大家分享了四种方法，并不难理解，还有示例供大家参考，有需要的朋友可以看看，对大家学习JavaScript会有一定的帮助，接下来就跟随小编一起学习一下吧。