圆月山庄资源网

解决vuex数据页面刷新后初始化操作
网络编程 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

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

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

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

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

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

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

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

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

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

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

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

同时在项目中我们也都尽量使用辅助函数来实现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数据页面刷新后初始化操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

标签：
vuex,页面刷新,初始化
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接