解决Vuex刷新丢失数据问题

最新推荐文章于 2023-09-01 17:28:42 发布

小游敲代码

最新推荐文章于 2023-09-01 17:28:42 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript 前端 npm

本文链接：https://blog.csdn.net/Alisonyou/article/details/131164269

vue 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何在Vue项目中通过npm安装vuex-persistedstate来解决Vuex状态在页面刷新后丢失的问题。在/store/index.js中，将插件添加到Vuex的store实例，设置storage为window.sessionStorage，并提供了两种方法来指定需要持久化的state路径。

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

1.安装 vuex-persistedstate

npm install --save vuex-persistedstate

2.使用

/store/index.js下

const store = new Vuex.Store({

    modules: {
        userOption,
    },
    plugins: [
        // 解决vuex刷新失效问题
        createPersistedState(
            {
               
                // 存储方式
                storage: window.sessionStorage,


                // 方法一：模块.数据
                paths: ['userOption.user'],

                // 方法二
                // reducer(state) {
                //     // 此时，当state值发生改变的时候，就会调用此函数，当前state对象
                //     return {
                //         'userOption.user': state.userOption.user
                //     }
                // }
            }
        )
    ]

})