vuex 状态缓存

╰+攻爆jí腚メ 2023-02-22 12:28 12阅读 0赞

1、代码 保存

在 app 页面编写

export default function(ctx)\{  
    //    离开页面  
        window.addEventListener('beforeunload', ()=> \{  
            console.log('触发离开事件')  
            sessionStorage.setItem("store",JSON.stringify(ctx.store.state))  
        \});  
//      页面加载完成  
        window.addEventListener('load', ()=> \{  
            console.log('触发加载完成事件')  
            let storeCache = sessionStorage.getItem("store")  
            if(storeCache != null&&storeCache != undefined&& storeCache!= '')\{  
                // 普通的state属性高更改的话需要用mutations ，但是如果你修改的是state 根属性的时候，那么  
                // 就要使用replaceState 方法了。  
                ctx.store.replaceState(JSON.parse(storeCache));  
            \}  
        \});  
\}

2. 采用插件// vuex-persist

import Vuex from 'vuex'

import Vue from 'vue'

import VuexPersistence from 'vuex-persist'// vux 状态缓存插件

// vuex-persist

const vuexLocal = new VuexPersistence(\{

storage: window.localStorage

\})

Vue.use(Vuex)

const store = new Vuex.Store(\{

state: \{

isLogin: false

\},

mutations: \{

changeLoginStatus (state, params) \{

state.isLogin = params

\}

\},

actions: \{

\},

modules: \{

\},

plugins: \[vuexLocal.plugin\]

\})

export default store

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关状态管理VueX

Vuex是一个专为Vue.js应用程序开发的状态管理模式；它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex可以管理复杂...

逃离我推掉我的手/ 2024年05月23日 18:58/ 0 赞/ 94 阅读

相关 vuex 状态缓存

1、代码保存在 app 页面编写 export default function(ctx)\{ // 离开页面 window.ad

╰+攻爆jí腚メ/ 2023年02月22日 12:28/ 0 赞/ 13 阅读

相关 Vuex数据状态持久化-vuex-persistedstate

[https://www.jianshu.com/p/04c288731819?utm\_campaign=haruki][https_www.jianshu.com_p_04

比眉伴天荒/ 2023年01月17日 09:20/ 0 赞/ 217 阅读

相关 Vuex（状态管理模式）

Vuex：状态管理模式，它采用集中式存储管理应用的所有组件的状态，应用于多级或者多个界面共享，如登录状态，用户名，头像，地理位置，收藏，购物车等项目结构 1> 应用

你的名字/ 2022年12月27日 01:13/ 0 赞/ 222 阅读

相关 vuex状态管理

座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人文章目录一、vuex是什么? 二、状态管理

一时失言乱红尘/ 2022年12月03日 08:56/ 0 赞/ 263 阅读

相关 vuex 状态管理

一、vuex状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发

小鱼儿/ 2022年12月02日 01:05/ 0 赞/ 313 阅读

相关 Vuex状态管理（四）

Vuex详解认识Vuex Vuex是做什么的？官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集

朴灿烈づ我的快乐病毒、/ 2022年11月19日 11:28/ 0 赞/ 244 阅读

相关 Vuex状态管理（四）

Vuex详解认识Vuex Vuex是做什么的？官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集

悠悠/ 2022年11月19日 11:27/ 0 赞/ 289 阅读

相关 Vuex 状态管理模式

Vuex 核心概念使用 Vuex store State Getter Mutation

缺乏、安全感/ 2022年05月18日 03:09/ 0 赞/ 314 阅读

相关 Vuex状态管理总结

一、什么是 Vuex 1、Vuex 是一个专为 Vue.js 应用程序开发的[状态管理模式][Link 1] 2、Vuex 采用集中式存储和管理应用中所有组件的状态

﹏ヽ暗。殇╰゛Y/ 2021年11月05日 12:56/ 0 赞/ 471 阅读