解决vuex数据页面刷新后初始化操作

 更新时间:2020年07月26日 10:43:21   作者:姚~xy  
这篇文章主要介绍了解决vuex数据页面刷新后初始化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法

1、利用storage缓存来实现vuex数据的刷新问题

我们可以在mutation等vuex的方法中对于数据进行改变时,将数据同时存储进我们的本地浏览器缓存中;下面是我在mutation中写的方法;

同步将数据的更改保存,也可以在页面调用vuex的mutation方法时同步更改;但是这种方法只能针对少量的数据需要保持不刷新,在真正的卡发中并不适用

2、利用已有的插件来进行保存新状态

一致的插件中,我目前使用的是vuex-along插件,该插件使用非常方便简洁。

通过 cnpm i vuex-along -D下载插件,在进行引入,在store里面通过plugin来使用,这样就能将所有的state的数据都进行保存,不回应为刷新而更改,当然如果你想仅对某些数据进行保存,也可以使用对应的插件的api来实现,具体的api请看github;

上面的代码仅为展示vuex-along插件的使用,项目的真实写法并不规范,对于一般项目会将vuex的每个模块独立拆分出来,分别进行管理

同时在项目中我们也都尽量使用辅助函数来实现vuex的管理,而不会应用原生的写法

对于state和getter的数据可以在计算属性中来因够用。而mutation和action则在methods方法应用;如果你需要修改计算属性,现在需要设置对应的setter。

以上纯属自己的一点意见,如果需要请采纳!

补充知识:vuex在刷新页面时保持数据不变(vuex状态持久化)

问题:

在 vue 项目中使用 vuex 来进行数据状态的管理,当刷新页面时,vuex 中 state 的数据会出现初始化问题(数据丢失)

解决方法:

1.使用 webStorage 缓存

当浏览器窗口关闭或者刷新时,会触发beforeunload事件,此时,可以使用 webStorage 缓存来实现 vuex 在刷新页面时保持数据不变

created(){
  //在页面加载时读取sessionStorage里的状态信息
  this.$store.state.userInfo = window.sessionStorage.getItem("userInfo") 
  //在页面刷新时将vuex里的信息保存到sessionStorage里
  window.addEventListener("beforeunload", () => {
    window.sessionStorage.setItem("userInfo", this.$store.state.userInfo)
  })
}

2.使用vuex状态持久化插件vuex-persistedstate

vuex-persistedstate插件使用浏览器的本地存储( local storage )对 vuex 的状态( state )进行持久化

安装 vuex-persistedstate:

npm install vuex-persistedstate --save-dev

在store文件夹的 index.js 中使用

//引入vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
......
export default new Vuex.Store({
 ......
 //配置vuex-persistedstate
 plugins: [createPersistedState(
  //配置将vuex的状态储存到sessionStorage中(默认储存到localStorage中)
  { storage: window.sessionStorage }
 )]
})

以上这篇解决vuex数据页面刷新后初始化操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Vue 开发模式下跨域问题

    详解Vue 开发模式下跨域问题

    本篇文章主要介绍了Vue 开发模式下跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue.js样式动态绑定实现小结

    Vue.js样式动态绑定实现小结

    这篇文章主要介绍了Vue.js样式动态绑定实现小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue关于接口请求数据过大导致浏览器崩溃的问题

    vue关于接口请求数据过大导致浏览器崩溃的问题

    这篇文章主要介绍了vue关于接口请求数据过大导致浏览器崩溃的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 在Vue中使用echarts的方法

    在Vue中使用echarts的方法

    这篇文章主要介绍了Vue中使用echarts的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • Vue项目中使用fontawesome图标库的方法

    Vue项目中使用fontawesome图标库的方法

    fontawesome的图标有免费版和专业版,本文主要使用free版本,一般free版本的图标够用,free图标又划分为三个图标库,主要有实心图标solid、常规图标regular及品牌图标brand,根据需求去下载对应的图标库,无须全部下载,对vue fontawesome图标库相关知识感兴趣的朋友一起看看吧
    2023-12-12
  • Vue自定义v-has指令实现按钮权限判断

    Vue自定义v-has指令实现按钮权限判断

    这篇文章主要给大家介绍了关于Vue自定义v-has指令实现按钮权限判断的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • elementUI el-radio 无法点击的问题解决

    elementUI el-radio 无法点击的问题解决

    本文主要介绍了elementUI el-radio 无法点击的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue-router+nginx 非根路径配置方法

    vue-router+nginx 非根路径配置方法

    这篇文章主要介绍了vue-router+nginx 非根路径配置方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue使用elementUI组件实现分页效果

    vue使用elementUI组件实现分页效果

    分页在展示数据列表的场景肯定是非常多的,一般的项目开发中,数据量特别大,一般都是后端接口直接处理分页返回,前端直接调用即可,本文给大家介绍了vue使用elementUI组件实现分页效果,需要的朋友可以参考下
    2023-12-12
  • Vue 项目性能优化方案分享

    Vue 项目性能优化方案分享

    本文是作者通过实际项目的优化实践进行总结而来,希望读者读完本文,有一定的启发思考,从而对自己的项目进行优化起到帮助
    2022-08-08

最新评论