vuex持久化问题?

vuex

vuex持久化问题?

vuex的数据只会存入到内存中,页面刷新就没了。

  1. 方案一:使用插件npm i vuex-persistedstate@3.2.1

    import Vue from 'vue'
    import Vuex from 'vuex'
    import createPersistedState from "vuex-persistedstate"
    import { getUserInfoAPI } from '@/api'
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
      },
      getters: {
      },
      actions: {
      },
      modules: {
      },
      plugins: [createPersistedState()]
    })
    
    
  2. 方案二:手动添加到localstorage中,首次渲染数据的时候,先获取localstorage没有再从vuex中拿。

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 UniApp 中,你可以使用 `vuex-persistedstate` 库来实现 Vuex持久化。`vuex-persistedstate` 是一个用于在 Vuex持久化状态的插件,它可以将 Vuex 状态保存到本地存储中,以确保在刷新页面或重新打开应用时能够保留状态。 以下是在 UniApp 中使用 `vuex-persistedstate` 实现 Vuex 持久化的步骤: 1. 安装 `vuex-persistedstate` 库: ``` npm install vuex-persistedstate ``` 2. 在 Vuex 的 store 文件中引入 `vuex-persistedstate`: ```javascript import createPersistedState from 'vuex-persistedstate'; ``` 3. 在创建 Vuex 的 store 实例时,将 `createPersistedState` 作为插件添加到选项中: ```javascript const store = new Vuex.Store({ // ...其他配置 plugins: [createPersistedState()] }); ``` 4. 配置需要持久化的模块: ```javascript const store = new Vuex.Store({ // ...其他配置 plugins: [createPersistedState({ key: 'yourKey', // 可选,用于自定义存储的键名,默认为 'vuex' paths: ['yourModule'], // 可选,指定需要持久化的模块,默认为全部模块 storage: uni.getStorageSync // 可选,自定义存储引擎,默认使用本地缓存 uni.getStorageSync })], modules: { yourModule: { // your module configuration } } }); ``` 在上述示例中,你可以通过 `key` 选项来自定义存储的键名,通过 `paths` 选项来指定需要进行持久化的模块,通过 `storage` 选项来指定自定义的存储引擎。 这样,当你使用 Vuex 存储状态时,`vuex-persistedstate` 会将状态自动保存到本地存储中,并在应用重新加载时还原状态。 请注意,在小程序中使用本地缓存进行持久化时,需要使用 `uni.getStorageSync` 作为存储引擎。如果需要在其他平台或环境中实现持久化,可以根据不同的需求选择适当的存储引擎。 希望这可以帮助到你实现 UniApp 中的 Vuex 持久化

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值