9、Vue 3 Pinia 使用实录：组件外使用存储

嗨，我是温新

在学习的这些案例中，都是在组件内使用 store，如果是在组件外使用，会出现错误。

本次演示使用的是 《Vue 3 Vue Router 使用实录》 的代码

单页应用

确保始终应用此功能的最简单方法是延迟调用 useStore()，方法是将它们放在安装 pinia 后始终运行的函数中。

src/router/index.ts

import { createRouter, createWebHistory } from "vue-router"
import { createApp } from 'vue'
// 引入 Pinia 与 数据仓库
import { createPinia } from 'pinia'
import  useUserStore  from '../stores/user'

// 实例 pinia
const testPinia = createApp({}).use(createPinia())

const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/',
            redirect:'/home'
        },
        {
            path:'/home',
            name:'home',
            component: () => import('@/views/HomeView.vue'),
            meta:{
                'title':'首页',
            },
            children:[
                {
                    path:'/home/contact',
                    name:'联系我',
                    components: {
                        contact:() => import('@/views/ContactView.vue')
                    }
                },
                {
                    path:'/home/category',
                    name:'分类',
                    components: {
                        category:() => import('@/views/CategoryView.vue')
                    }
                }
            ]
        },
        {
            path:'/about',
            name:'about',
            component: () => import('@/views/AboutView.vue'),
            meta:{
                'title':'关于'
            },
            children: [
                {
                    path:'/about/post/:id',
                    name:"Post",
                    component: () => import('@/views/PostView.vue'),
                    props:true
                }
            ]
        },
        {
            path:'/:patchMatch(.*)',
            name:'404',
            component: () => import('@/views/404.vue')   
        },
        {
            path:'/login',
            name:'login',
            component: () => import('@/views/LoginView.vue'),
            meta:{
                'title':'登录',
            },
            // 拦截登录路由
            beforeEnter: (to, from ,next) => {
                console.log('单个拦截');
                
                console.log(to);
                next()
            }
        },
    ]
})

// 全局前置拦截
router.beforeEach((to, from, next) => {
    console.log('全局拦截');
    console.log(to);

    // 使用
    const userStore = useUserStore()
    console.log(userStore.age);


    if (to?.meta?.title) {
        document.title = '自如初-' + to.meta.title
    }

    next()
})

// 全局后置拦截
router.afterEach((to,from,next) => {
    console.log('后置拦截');
    console.log(to);


})

export default router