Vuex持久化插件

无盐海

已于 2023-11-11 15:41:51 修改

阅读量282

点赞数

分类专栏： Vue 文章标签：前端 javascript 开发语言

于 2023-11-11 15:41:41 首次发布

本文链接：https://blog.csdn.net/fanbin168/article/details/134349140

版权

Vue 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中使用vuex-persistedstate插件，将Vuex的数据存储在localStorage中，以便实现状态的持久化。通过实例展示了如何在Vuexstore配置中集成该插件并指定要持久化的数据。

摘要由CSDN通过智能技术生成

Vuex数据默认是存储在内存中的，当然我们也可以将它存储在Local Storage，也可以指定某些数据存储在Local Storage 这样我们就用到了Vuex持久化插件vuex-persistedstate

安装vuex-persistedstate插件

npm install vuex-persistedstate --save

案列：

import axios, { Axios } from 'axios';
import { createStore } from 'vuex'

import ListAModule from '../views/ListAModule.js'
import ListBModule from '../views/ListBModule.js' //导入模块
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
    plugins:[createPersistedState({
        reducer:(state)=>{
            return{
                name:state.ListAModule.name //将ListAModule模块中的name持久化到Local Storage中
            }
        }
    })],

    modules: {
        ListAModule,  //ListAModel:ListAModel简写  注册ListAModel模块
        ListBModule   //ListBModel:ListBModel简写  注册ListBModel模块
    }
});

export default store