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

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 } = context
  window.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!