Vue3中的VueX持久化

最新推荐文章于 2024-09-30 08:30:00 发布

SunFlower914

最新推荐文章于 2024-09-30 08:30:00 发布

阅读量1.6k

点赞数 1

文章标签：前端 javascript npm

本文链接：https://blog.csdn.net/SunFlower914/article/details/126483914

版权

本文介绍了如何在 Vue3 应用中利用 vuex-persistedstate 插件实现状态管理的持久化，通过在 store 中创建模块并配置插件，确保特定的 state 在刷新页面后仍能保持。即使模块没有使用 namespaced，依然需要指定模块名来访问 state。同时，还讨论了命名空间 namespaced 的使用，提高了模块的封装度和复用性。

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

1.下载持久化插件

npm i vuex-persistedstate

2.将store模块化，在src/store 文件夹下新建 modules 文件，在 modules 下新建多个js文件

//src/store/index.js文件中
import { createStore } from 'vuex'

import mode1 from './modules/mode1 '
import mode2 from './modules/mode2 '
import mode3 from './modules/mode3 '

export default createStore({
  modules: {
    mode1 ,
    mode2 ,
    mode3 
  }
})

3.使用vuex-persistedstate插件来进行持久化

//src/store/index.js文件中
import { createStore } from 'vuex'
//+1
import createPersistedstate from 'vuex-persistedstate'

import mode1 from './modules/mode1 '
import mode2 from './modules/mode2 '
import mode3 from './modules/mode3 '

export default createStore({
  modules: {
    mode1 ,
    mode2 ,
    mode3 
  },
//+1
  plugins: [
//默认是存储在localStorage中
    createPersistedstate({
// key: 存储数据的键名
      key: 'longStore',
//paths:存储state中的那些数据
      paths: ['mode1', 'mode2']
    })
  ]
})

在vue3中以上使用到了modules分模块，在此补充：

即使改模块未带命名空间namespaced:true，在使用store获取数据的时候仍然要加上模块名($store.state.mode1.name)，其他 getters mutations actions 都在全局。
带命名空间 namespaced: true 的模块，所有功能区分模块，更高封装度和复用