feat: Switch to Setup Stores in Pinia

Author: cwandev

src/App.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import type { ConfigProviderTheme } from 'vant'
-import { useRouteTransitionNameHook } from '@/stores/modules/routeTransitionName'
+import { storeToRefs } from 'pinia'
+import useRouteTransitionNameStore from '@/stores/modules/routeTransitionName'
 
 const theme = ref<ConfigProviderTheme>('light')
 provide('isRealDark', computed(() => theme.value === 'dark'))
+
+const routeTransitionNameStore = useRouteTransitionNameStore()
+const { routeTransitionName } = storeToRefs(routeTransitionNameStore)
 </script>
 
 <template>
   <VanConfigProvider :theme="theme">
     <router-view v-slot="{ Component, route }">
-      <transition :name="useRouteTransitionNameHook().routeTransitionName">
+      <transition :name="routeTransitionName">
         <div :key="route.name" class="app-wrapper">
           <component :is="Component" />
         </div>

src/main.ts

@@ -1,8 +1,7 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import App from '@/App.vue'
 import router from '@/router'
+import pinia from '@/stores'
 
 import 'virtual:uno.css'
 
@@ -23,8 +22,6 @@ import 'vant/es/notify/style'
 import 'vant/es/image-preview/style'
 
 const app = createApp(App)
-const pinia = createPinia()
-pinia.use(piniaPluginPersistedstate)
 
 app.use(router)
 app.use(pinia)

src/router/index.ts

@@ -1,25 +1,27 @@
 import { createRouter, createWebHistory } from 'vue-router/auto'
 import NProgress from 'nprogress'
 
-import { useRouteTransitionNameHook } from '@/stores/modules/routeTransitionName'
+import useRouteTransitionNameStore from '@/stores/modules/routeTransitionName'
 import 'nprogress/nprogress.css'
 
 NProgress.configure({ showSpinner: true, parent: '#app' })
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.VITE_APP_PUBLIC_PATH),
 })
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
-  const hook = useRouteTransitionNameHook()
+
+  const routeTransitionNameStore = useRouteTransitionNameStore()
   if (to.meta.level > from.meta.level)
-    hook.setName('slide-fadein-left') // 进入动画
+    routeTransitionNameStore.setName('slide-fadein-left')
 
   else if (to.meta.level < from.meta.level)
-    hook.setName('slide-fadein-right') // 返回动画
+    routeTransitionNameStore.setName('slide-fadein-right')
 
   else
-    hook.setName('') // 没有动画
+    routeTransitionNameStore.setName('')
 
   next()
 })
@@ -28,5 +30,4 @@ router.afterEach(() => {
   NProgress.done()
 })
 
-// 导出路由实例，并在 `main.ts` 挂载
 export default router

src/stores/index.ts

@@ -1,4 +1,7 @@
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
-const store = createPinia()
-export { store }
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+export default pinia

src/stores/modules/routeTransitionName.ts

@@ -1,19 +1,16 @@
 import { defineStore } from 'pinia'
-import { store } from '@/stores'
 
-export const useRouteTransitionNameStore = defineStore({
-  id: 'route-transition-name',
-  state: () => ({
-    // 过渡动画名称
-    routeTransitionName: '',
-  }),
-  actions: {
-    setName(name: string) {
-      this.routeTransitionName = name
-    },
-  },
+const useRouteTransitionNameStore = defineStore('route-transition-name', () => {
+  const routeTransitionName = ref('')
+
+  const setName = (name: string) => {
+    routeTransitionName.value = name
+  }
+
+  return {
+    routeTransitionName,
+    setName,
+  }
 })
 
-export function useRouteTransitionNameHook() {
-  return useRouteTransitionNameStore(store)
-}
+export default useRouteTransitionNameStore