东营网站建设培训学校,基础网站开发,网站建设制作网站,云南网站建设天软科技1、演示 前言#xff1a;目前Vue有两种仓库#xff0c;一种是Vuex#xff0c;一种是Pinia#xff0c;懂得都懂#xff0c;这里就不详细介绍这两者的区别了 2、什么是持久化 仓库里面的数据是需要跨越页面周期的#xff0c;当页面刷新之后数据还在#xff0c;在默认情况下…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用replaceStatePinia用$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!
