vuex-persistedstate数据同步存储到本地的插件

最新推荐文章于 2023-09-05 14:51:58 发布

酸奶味的核桃

最新推荐文章于 2023-09-05 14:51:58 发布

阅读量334

点赞数

分类专栏：插件文章标签： vuex 持久化 localStorage state管理前端开发

本文链接：https://blog.youkuaiyun.com/qq_58061710/article/details/125143462

版权

插件专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue应用中利用vuex-persistedstate插件，将Vuex的状态数据存储到本地，以便在刷新页面后仍然能保留用户状态。首先，通过npm安装vuex-persistedstate插件，然后在store/index.js中引入并配置，设置要持久化的state模块，例如'user'，这样便实现了数据的本地存储，简化了手动管理本地存储的过程。

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

文章目录

前言
一、安装插件
二、使用步骤

前言

让在vuex中管理的状态数据同时存储在本地，省略了自己存储的环节

一、安装插件

npm i vuex-persistedstate

二、使用步骤

代码如下（示例）：在store/index.js中引用

//引入vuex
import { createStore } from 'vuex'
//引入persistedstate
import createPersistedstate from 'vuex-persistedstate'
//配置
export default createStore({
  plugins: [
    // 默认存储到localStorage中
    // key是存储数据的键名
    // paths 是存储state中的哪些数据 如果是模块下具体的数据需要加上模块名称 比如user.token
    createPersistedstate({
      key: "xkadmin-store",
      paths:['user']  //你要进行本地存储的模块
    })
  ]
})