大事件管理系统项目总结（上）

Pinia - 配置仓库统一管理

使用pinia多层文件夹嵌套时，导入某个文件的路径会很长，容易写错，此时可以创建一个index.js出口文件来集合所有要导出的仓库，当要用某些仓库时，可以直接从index.js中导入仓库即可。

统一在index.js中导出：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

export * from './modules/counter'
export * from './modules/user.js'

// 或者：
// export { useCounterStore } from './modules/counter'
// export { useUserStore } from './modules/user.js'

导入使用：

<script setup>
import { useUserStore } from '@/stores' // 导入useUserStore模块

const userStore = useUserStore()

console.log(userStore.token.value)
</script>

<template>
 <div>{{ userStore.token }}</div>
</template>

<style lang="scss" scoped>
// ...
</style>

Vue3路由配置

import { createRouter, createWebHistory } from 'vue-router'

// createRouter 创建路由实例 ===> new VueRouter()
// 1. 设置history模式: createWebHistory()   http://xxx/user
// 2. 设置hash模式: createWebHashHistory()  http://xxx/#/user

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path

// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts  添加配置  base: my-path，这时路由就会加上 my-path 前缀了

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

• import.meta.env.MODE: {string} 应用运行的模式。
• import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境（使用 NODE_ENV=‘production’ 运行开发服务器或构建应用时使用 NODE_ENV=‘production’ ）。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
• import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

Vue3导航拦截

// return false 表示取消该路由跳转
// return true 或没有return表示允许该路由的跳转
// return 路径 表示跳转到该路径
// to 表示当前进入的目标
router.beforeEach((to) => {
  const userStore = useUserStore()
  if ( to.path !== '/login' && !userStore.token ) {
    return '/login'
  }
})