当前位置：首页 > news >正文

解决Vue中仓库持久化的问题，不借助插件用原生JS实现仓库持久化。了解仓库的插件机制、监听的时机

news 2025/9/7 0:54:54

1、演示

前言：目前Vue有两种仓库，一种是Vuex，一种是Pinia，懂得都懂，这里就不详细介绍这两者的区别了

2、什么是持久化

仓库里面的数据是需要跨越页面周期的，当页面刷新之后数据还在，在默认情况下肯定是不行的，因为仓库里面的数据实际上是存在内存里面的，本质上就是一个对象，对象就在内存里面

如果说需要跨越页面周期的话，就需要把仓库的数据持久化的保存起来，具体的保存位置可以是localStorage、webStorage、sessionStorage、indexD等等，也可以是别的。具体保存在哪里无所谓，反正要保存起来。

3、Vuex的做法

import { createStore } from 'vuex'
import counter from './counter'
import text from './text'
const store = createStore({modules: {counter,text,},plugins: [???],
})
在建立仓库的时候实际上是可以配置插件的，因此可以配置 plugins 属性，让它支持一些插件。插件的本质其实就是一个函数，因此可以在插件中放入一个自己写的函数

这个函数的运行时间在仓库创建之后，并且可以把整个仓库对象（store）传出去
plugin: [persisPlugin]
定义这个函数并接收仓库对象
function persisPlugin(store) {}
存储数据

存储数据一般有两种做法：

1、只要仓库的数据一变，马上就存一次优点就是实时性会非常高但是会影响一些效率因为存数据还是比较耗时的

2、在关闭页面或者是刷新页面的时候之前的页面会被卸载，在页面卸载的时候把数据存起来
  window.addEventListener('beforeunload', () => {localStorage.setItem('VUEX_DATA', JSON.stringify(store.state))})
取出数据

取出数据的方法：

1、在最开始的时候就把它取出来
  try {const state = JSON.parse(localStorage.getItem('VUEX_DATA'))if (state) {// 解析出来了之后就替换掉原来仓库的数据store.replaceState(state)}} catch (error) {console.log('存储的数据有误')}
注意：用 try catch 的原因就是有可能会报错，比如果之前没有存或者存储的格式被篡改了

完整代码
import { createStore } from 'vuex'
import x1 from './x1'
import x2 from './x2'
const store = createStore({modules: {x1,x2,},plugin: [persisPlugin],
})function persisPlugin(store) {window.addEventListener('beforeunload', () => {localStorage.setItem('VUEX_DATA', JSON.stringify(store.state))})try {const state = JSON.parse(localStorage.getItem('VUEX_DATA'))if (state) {// 解析出来了之后就替换掉原来仓库的数据store.replaceState(state)}} catch (error) {console.log('存储的数据有误')}
}
export default store

4、Pinia的做法

Pinia也是支持插件的，但是在Vue3中，插件的使用需要同过use方法
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
pinia.use(???)
app.use(pinia)
app.mount('#app')
Pinia里面的插件也是一个函数因此我们定义函数并且使用
function piniaPlugin(context) {}
pinia.use(piniaPlugin)
跟Vuex的区别

1、Pinia接收的不是整个仓库，而是一个context

2、Pinia里面的仓库是分开存储的

3、替换值的时候Vuex用replaceState，Pinia用$pacth

第2点分开存储意思解析

比如这是A仓库
import { defineStore } from 'pinia'
const useStore = defineStore('A',()=>{})
这是B仓库
import { defineStore } from 'pinia'
const useStore = defineStore('B',()=>{})
3、因此Pinia里面会有多条存储记录

存储数据

Pinia跟Vuex的存储时机是相同的，但是因为有多条记录，因此存储的时候要注意存储的KEY值，这里用仓库ID来区分
window.addEventListener('beforeunload', () => {localStorage.setItem(`Pinia_${store.$id}`, JSON.stringify(store.$state))
})
取出数据

取数据的时候一样，也要根据不同的KEY值来取
  try {const state = JSON.parse(localStorage.getItem(`Pinia_${store.$id}`))if (state) {// 解析出来了之后就替换掉原来仓库的数据store.$pacth(state)}} catch (error) {console.log('存储的数据有误')}
完整代码
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
pinia.use(piniaPlugin)
app.use(pinia)
app.mount('#app')
function piniaPlugin(context) {const { store } = contextwindow.addEventListener('beforeunload', () => {localStorage.setItem(`Pinia_${store.$id}`, JSON.stringify(store.$state))})try {const state = JSON.parse(localStorage.getItem(`Pinia_${store.$id}`))if (state) {// 解析出来了之后就替换掉原来仓库的数据store.$pacth(state)}} catch (error) {console.log('存储的数据有误')}
}
// Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, sed officia eum sit hic dicta voluptatibus tempora reiciendis praesentium dolor!