vuex实现持久化存储

最新推荐文章于 2024-07-23 15:47:26 发布

什么意思哦呢嗯

最新推荐文章于 2024-07-23 15:47:26 发布

阅读量340

点赞数

文章标签：前端 javascript 开发语言 vue

本文链接：https://blog.youkuaiyun.com/qq_49171551/article/details/131981830

版权

当使用Vuex管理状态时，页面刷新会导致数据丢失。为解决此问题，可以使用vuex-persistedstate插件来实现状态持久化。安装该插件后，在store的index.js中引入并配置，可以选择存储方式如localStorage，并指定要持久化的state部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用vuex存储数据的时候刷新页面数据会消失，此时就可以使用持久化存储

使用vuex-persistedstate插件

第一步：下载插件

$ npm install vuex-persistedstate

第二步：在store的index.js里面引入插件

import createPersistedState from 'vuex-persistedstate'

第三步：在文件中使用

在getters下面使用加上


  plugins: [
    //1.0默认是localStorage
    ceratePersistedState()
    //2.0想要改变存储方式
    createPersistedState({
    //   storage: window.sessionStorage或者window.localStorage或者window.cookie,
      // 存储的 key 的key值
      key: "store",
      reducer(state) { 
        //1.0 如果想要存储state中的某些值
        return { 
            near:state.near,
            mid:state.mid,
            far:state.far
        };
        //2.0 如果想要存储state中的所有值
        return{
            ...state
      }
    })
  ]