Vite、Pinia、Router

Vite

Vite 是一种新型的前端构建工具，它可以在开发过程中提供快速的反应速度。相对于其他传统的打包工具，Vite利用浏览器原生ES模块导入功能代替传统的打包方式，实现了更快的构建和启动速度，在生产环境下打包使用 Rollup

开始： npm create vite@latest

根据提示完成项目创建

√ Project name: ... vite-test
√ Select a framework: » Vue
√ Select a variant: » JavaScript

安装依赖：npm i

运行：npm run dev

项目结构与 vue-cli 差不多

差别： (1) index.html 现在位于项目根目录 (2) vite.config.js 是Vite项目的配置文件，用于配置Vite本身和插件的选项

路由router

在 vue2 中学的是 vue-router@3，现在该跟上最新版本了

安装：npm i vue-router

虽然大版本变了，但很多功能和写法也只是稍微变了点样子

配置路由：

// 导入创建路由必要的方法
import { createRouter, createWebHashHistory } from "vue-router";
// 路由懒加载
const Login = () => import('../components/Login/index.vue')

// 路由配置
const routes = [
  {
    // 都是熟悉的配置项
    path: '/login',
    name: 'Login',
    component: Login,
    children:[]
  }
];

// 创建路由并暴露其返回值
export default createRouter({
  // 配置路由模式hash和history
  history: createWebHashHistory(),
  // 使用路由配置
  routes
})

在 main.js 导入并使用路由

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由
import router from './router'
// 使用路由
createApp(App).use(router).mount('#app')

路由模式

hash 模式 createWebHashHistory()

HTML5 模式 createWebHistory()

import { createWebHashHistory, createWebHistory } from "vue-router";
export default createRouter({
  // history: createWebHashHistory(),
  history: createWebHistory(),
  routes
})

路由守卫

路由守卫使用也和之前差不多

现在每个路由守卫都接收两个参数，不再有 next() (1) to: 即将要进入的目标 (2) from: 当前导航正要离开的路由

通过返回值来控制路由： (1) false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。 (2) 一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像调用 router.push() 一样，可以设置诸如 replace: true 或 name: 'home' 之类的配置。当前的导航被中断，然后进行一个新的导航，就和 from 一样。 (3) 无返回值或true: 继续当前路由

全局路由守卫：

const router = createRouter({ /* ... */ }）
let isAuthenticated = true;
// 全局前置守卫
router.beforeEach(async (to, from) => {
  console.log(to,from);
  if (
    // 检查用户是否已登录
    !isAuthenticated &&
    // ❗️ 避免无限重定向
    to.name !== 'Login'
  ) {
    // 将用户重定向到登录页面
    return { name: 'Login' }
  }
})

编程式路由

在 vue3 组合式 API 中不再有 this

使用 useRouter(), useRoute() 的返回值获取路由器和当前路由对象，route 对象是一个响应式对象

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
console.log(route);
function pushLogin() {
  router.push({
    name: 'Login'
  })
}

**注意：**在模板中仍然可以访问 $router 和 $route，不需要在 setup 中返回 router 或 route

导航流程

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

路由这块，多看文档吧

pinia

Pinia 是类似 Vuex 的状态管理库，具有更好的类型安全性和更简单的API

pinia 中只有 state、getter、action，抛弃了 Vuex 中的 Mutation，但和 vuex 一样，有一个 store

安装：npm i pinia

createPinia 创建并使用pinia：

// 导入并使用pinia
import { createPinia } from 'pinia'
app.use(createPinia())

创建store

使用 defineStore() 创建一个 store，并且需要一个唯一名称，作为第一个参数传递。pinia中允许创建多个store

import { defineStore } from 'pinia'
// 创建并暴露一个store
export default defineStore('mainStore', {
  // 类似data，存储状态
  // 在 Pinia 中，状态被定义为返回初始状态的函数
  state: () => {
    return {
      num: 1,
      name: 'chuckle'
    }
  },
  // 对状态的操作
  actions: {
    add(){
      this.num++
    }
  },
  // 相当于计算属性，传入一个store的state作为参数
  getters: {
    bigNum(state){
      return state.num*10
    }
  }
});

使用store操作状态

在需要使用该 store 的组件中引入

为了从 Store 中提取属性同时保持其响应式，需要使用 storeToRefs()

<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from './stores/mainStore'
// store 是一个用reactive 包裹的对象，不能对其进行解构
const store = useStore()
// 为了从 Store 中提取属性同时保持其响应式，需要使用storeToRefs()
const { num, name, bigNum } = storeToRefs(store)
</script>
<template>
  <!-- store中的 -->
  <h3>{{ store.name }}</h3>
  <h3>{{ store.num }}</h3>
  <h3>{{ store.bigNum }}</h3>
  <!-- 提取出来的 -->
  <h3>{{ name }}</h3>
  <h3>{{ num }}</h3>
  <h3>{{ bigNum }}</h3>
  <button @click="store.add()">增加</button>
</template>

其它操作：

$reset() 重置 state

<button @click="store.$reset()">重置</button>

$patch() 批量写入或修改 state

function bulkChange(){
  store.$patch((state)=>{
    state.name = "qx";
    state.num = state.num *10
  })
}

轻笑Chuckle

文章目录