这种原理的实现基于Vue.js的生命周期钩子和组件实例的API,通过这些机制,Pinia-Plugin-PersistedState可以在组件加载、更新和销毁时保存和恢复状态。 二、工作原理 1. 初始化阶段:Pinia-Plugin-PersistedState插件在Pinia应用初始化时被加载并注册到Pinia应用中。插件会监听Pinia应用的创建和销毁事件,以便在必要时保存和恢复...
如果不使用piniapluginpersistedstate,开发人员需要手动将这些状态存储到本地存储或cookie中,并在每个页面中进行恢复和更新。这样做不仅复杂,还容易引发错误。 使用piniapluginpersistedstate的好处是,它提供了一种方便的方法来自动将这些需要共享和持久化的状态存储到本地存储中,并在应用重新加载时恢复。开发人员只需要在Vue...
const parentPinia = window.opener.vueGlobalProperties.$pinia;3.可以通过监听父窗口store状态发生变化时,给子窗口发送事件的方式,实现同步更新。// 新打开的子窗口letNewWin = window.open(url);// 父窗口监听pinia数据有变化时,更新子窗口store.$subscribe(()=> {if(NewWin) {NewWin.postMessage("updateStore"...
vue3+pinia+piniaPluginPersistedstate持久化sessionStorage缓存,页面中某个按钮点击单独open一个浏览器新窗口,执行某些操作后,更新pinia数据,更新后主窗口和新窗口的pinia数据不同步嘛? 源窗口id已更新,之前打开的新窗口还是显示的新窗口打开时的id 源窗口更新后的id值: 新窗口还是显示的新窗口打开时的id值: 如果不同...
如果不使用piniapluginpersistedstate,开发人员需要手动将这些状态存储到本地存储或cookie中,并在每个页面中进行恢复和更新。这样做不仅复杂,还容易引发错误。 使用piniapluginpersistedstate的好处是,它提供了一种方便的方法来自动将这些需要共享和持久化的状态存储到本地存储中,并在应用重新加载时恢复。开发人员只需要在Vue...
vue3+pinia+piniaPluginPersistedstate持久化sessionStorage缓存,页面中某个按钮点击单独open一个浏览器新窗口,执行某些操作后,更新pinia数据,更新后主窗口和新窗口的pinia数据不同步嘛? 源窗口id已更新,之前打开的新窗口还是显示的新窗口打开时的id 源窗口更新后的id值: ...