Vue.js前端框架教程2：Vue路由和状态管理库Pinia

文章目录

• • • • [Vue 路由](#Vue 路由)
      • • [安装 Vue Router](#安装 Vue Router)
        • 基本设置
        • 定义路由
        • 嵌套路由
        • 路由参数和查询
        • 导航守卫
        • 懒加载
        • [使用 `<router-link>` 和 `<router-view>`](#使用 <router-link> 和 <router-view>)
      • Pinia
      • • [Pinia 的核心特性](#Pinia 的核心特性)
        • [Pinia 的安装和使用](#Pinia 的安装和使用)

Vue 路由

Vue 路由是指在 Vue.js 应用中管理不同页面或视图的路由。Vue 官方提供了一个名为 Vue Router 的插件，它允许你为单页面应用（SPA）构建多视图的页面结构。以下是 Vue 路由的一些基本概念和使用方法：

安装 Vue Router

首先，你需要安装 Vue Router。如果你使用的是 Vue CLI 创建的项目，Vue Router 可能已经包含在内。否则，你可以通过 npm 或 yarn 来安装它：

npm install vue-router
# 或者
yarn add vue-router

基本设置

在你的 Vue 应用中，你需要创建一个路由器实例，并将其传递给 Vue 的 use 方法：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

然后，在 main.js 中使用这个路由器：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

定义路由

在 Vue Router 中，每个路由都是一个对象，至少包含 path 和 component 属性。path 定义了 URL 的路径，component 指定了对应的组件。

嵌套路由

Vue Router 支持嵌套路由，允许你定义更复杂的页面结构：

{
  path: '/user',
  component: User,
  children: [
    {
      path: '',
      component: UserHome,
    },
    {
      path: 'posts',
      component: UserPosts,
    },
  ],
}

路由参数和查询

你可以在路由中定义参数和查询字符串：

// 参数
{
  path: '/user/:id',
  component: User
}

// 查询
{
  path: '/search',
  component: Search
}

在组件中，你可以通过 this.$route.params 和 this.$route.query 访问这些值。

导航守卫

Vue Router 提供了导航守卫（Navigation Guards），允许你在路由发生变化之前或之后执行逻辑：

const router = createRouter({
  // ...路由配置
});

router.beforeEach((to, from, next) => {
  // 在渲染该路由的对应组件之前调用
  if (to.name === 'Profile' && !isAuthenticated) {
    // 重定向到登录页面
    next('/login');
  } else {
    next();
  }
});

懒加载

Vue Router 支持路由组件的懒加载，可以减少应用的初始加载时间：

const routes = [
  {
    path: '/about',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
];

使用 <router-link> 和 <router-view>

在 Vue 应用中，你可以使用 <router-link> 创建导航链接，使用 <router-view> 显示当前路由的组件：

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view/>
  </div>
</template>

Vue Router 是构建单页面应用的强大工具，它提供了丰富的功能来满足复杂的路由需求。通过合理使用 Vue Router，你可以创建出结构清晰、易于维护的前端应用。

Pinia

Pinia 是 Vue.js 的一个状态管理库，它被设计为 Vuex 的替代品，提供了一种更简单、更直观的方式来管理 Vue 应用的状态。以下是 Pinia 的一些核心特性和使用方法：

Pinia 的核心特性

1. 类型安全 ：Pinia 提供了完全的 TypeScript 支持，使得状态管理在类型层面更加安全。
2. 模块化设计 ：Pinia 的 Store 是模块化的，每个 Store 都是独立的，可以包含自己的状态、getters 和 actions。
3. 简化的 API ：与 Vuex 相比，Pinia 没有 mutations，而是使用 actions 来处理同步和异步的状态更改。
4. 自动注册 ：Pinia 的 Store 默认情况下创建就自动注册，无需手动注入。
5. 支持 Vue 2 和 Vue 3 ：Pinia 同时支持 Vue 2 和 Vue 3，提供了一致的 API。
6. 支持插件扩展 ：Pinia 支持插件系统，可以扩展其功能，例如状态持久化。
7. 支持服务端渲染 ：Pinia 支持服务端渲染（SSR）。
8. 集成 Vue Devtools ：Pinia 与 Vue Devtools 紧密集成，提供了增强的开发体验。

Pinia 的安装和使用

1. 安装 Pinia：

   npm install pinia
   # 或者使用 yarn
   yarn add pinia

2. 在 Vue 应用中注册 Pinia：

   import { createApp } from 'vue'
   import { createPinia } from 'pinia'
   import App from './App.vue'
   
   const app = createApp(App)
   const pinia = createPinia()
   app.use(pinia)
   app.mount('#app')

3. 创建 Pinia Store：

   import { defineStore } from 'pinia'
   
   export const useCounterStore = defineStore('counter', {
     state: () => {
       return {
         count: 0
       }
     },
     getters: {
       doubleCount: (state) => state.count * 2
     },
     actions: {
       increment() {
         this.count++
       }
     }
   })

4. 在 Vue 组件中使用 Pinia Store：

   import { useCounterStore } from '@/stores/counter'
   
   export default {
     setup() {
       const counterStore = useCounterStore()
       return {
         ...counterStore
       }
     }
   }

5. Pinia 插件和持久化 ：
   Pinia 支持使用插件来扩展其功能，例如 pinia-plugin-persist 可以实现状态的持久化存储。

Pinia 提供了一个现代化、高效和灵活的状态管理解决方案，特别适合用于 Vue 3 应用，并且由于其与 Vue Devtools 的集成，使得开发和调试变得更加方便。