一、前言
測試提出，登出登錄后，再次進入頁面后。頁面的查詢項非初始狀態。檢查后發現，是因為查詢項的值存到了store呢，從store中獲取，故需要一個重置store的方法
二、pinia
查閱pinia官網后，發現pinia提供了一個reset方法可以重置狀態。官網位置：重置狀態
重置狀態
您可以通過調用 store 上的 $reset() 方法將狀態 reset 到其初始值：
const store = useStore()store.$reset()
但是實操發現，直接調用報錯
pinia.js?v=0f025a7f:1058 Uncaught (in promise) Error: 🍍: Store "data" is built using the setup syntax and does not implement $reset(). at Proxy.$reset (pinia.js?v=0f025a7f:1058:13)
原因：Pinia 提供的 $reset 方法僅適用于使用 options 語法（即 state 選項）定義的 store，對于使用 setup 語法定義的 store不適用，需要手動實現狀態重置功能。
三、解決方案
手動賦值每個狀態不優雅，故考慮使用pinia的插件，為pinia擴展一個reset方法
- 創建pinia插件
// src/store/plugins/piniaResetPlugin.js
export function createResetPlugin() {return ({ store }) => {// 保存初始狀態的副本const initialState = JSON.parse(JSON.stringify(store.$state))// 定義 reset 方法store.$reset = () => {store.$patch(initialState)}}
}
- 注冊pinia插件
// src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import { createResetPlugin } from './store/plugins/piniaResetPlugin'const app = createApp(App)const pinia = createPinia()
// 注冊插件
pinia.use(createResetPlugin())app.use(pinia)
app.mount('#app')
- 使用
$reset方法
<template><button @click="handleLogout">Logout</button>
</template><script>
import { useDataStore } from '@/store/interface/data'
import { useAuthStore } from '@/store/auth' // 假設有一個 auth store 用于處理登錄export default {setup() {const dataStore = useDataStore()const authStore = useAuthStore()const handleLogout = async () => {await authStore.logout()// 調用 reset 方法dataStore.$reset()// 其他登出邏輯this.$router.push('/login') // 例如，重定向到登錄頁}return {handleLogout}}
}
</script>
一個完整的插件開發，注冊，使用的流程就完成啦
四、總結
通過創建一個適用于 setup 語法的 Pinia 插件，可以更優雅地為所有 stores 添加 reset 方法。這種方法確保狀態重置功能在 setup 語法的 store 中也能正常工作。
)
