vuex.store把state中的数据分别存localStorage 和 sessionStorage中

在Vuex.Store默认把数据存到localStorage中,但如果想要同时存到sessionStorage中,可以借助createPersistedState 实现功能

1、安装createPersistedState

      npm i createPersistedState

 2、在new Vuex.Store对象中 添加 plugins 对象

     export default new Vuex.Store({

         state:{},

         plugins: [

            createPersistedState({ storage: {

               getItem: key => {

                  return sessionStorage.getItem(key) || localStorage.getItem(key)

                },

              setItem: (key, value) => {

                  sessionStorage.setItem(key, value)

                  localStorage.setItem(key, value)

               },

             removeItem: key => {

                 sessionStorage.removeItem(key)

                 localStorage.removeItem(key)

             }

         }})

       ],

   })

 3、最后在控制台打开可以看到 sessionStorage 和 localStorage  中发现 vuex 对象

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`$store.state` 是 Vuex 数据的地方,可以看作是一个全局的状态管理器,它可以储应用程序的所有状态,而且所有组件都可以访问和修改它。 `sessionStorage` 和 `localStorage` 是浏览器提供的 Web 储机制,用于在浏览器数据。它们的区别在于数据的生命周期不同,`sessionStorage` 储的数据在浏览器会话期间有效,当用户关闭浏览器窗口后,数据就会失效;而 `localStorage` 储的数据则会一直在,即使用户关闭浏览器窗口,数据也不会丢失,除非用户手动清除。 因此,`$store.state` 和 `sessionStorage`&`localStorage` 的区别在于: 1. `$store.state` 储的数据是全局的,可以在整个应用程序访问和修改,而 `sessionStorage`&`localStorage` 储的数据只能在当前浏览器窗口访问和修改。 2. `$store.state` 储的数据是在内储的,应用程序重新加载后数据会丢失,而 `sessionStorage` 储的数据在浏览器会话期间有效,`localStorage` 储的数据则会一直在。 3. `$store.state` 储的数据可以在应用程序进行响应式处理,而 `sessionStorage`&`localStorage` 储的数据不支持响应式处理。 因此,在实际开发,我们需要根据具体的需求选择合适的储方式。如果需要在整个应用程序共享数据,并且数据需要支持响应式处理,那么就应该选择 `$store.state`;如果需要在浏览器窗口数据,并且数据需要在浏览器会话期间有效,那么就应该选择 `sessionStorage`;如果需要在浏览器长期数据,那么就应该选择 `localStorage`。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值