Vue3+Vite 之 从0到1搭建系统 - Part 2

记录Vue3 + Vite 从 0 到 1 搭建系统的过程。系列文章：

【1】Vue3+Vite 之 从0到1搭建系统 - Part 1

本章节主要记录Vue-Router 和 Pinia 的安装使用，如果Part 1创建项目时已经选择配置好了的，本章节可忽略。

Vue-Router

步骤

第一步：安装vue-router

npm i vue-router@4

第二步：在src目录下创建router文件夹，并新建index.js文件存放相关路由信息。

第三步：index.js 配置路由

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: "/home",
    component: () => import("@/views/home/index.vue"),
    name: "Home",
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes: routes
  
});

export default router;

main.js 引用router

import { createApp } from 'vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

关于VueRouter v3 和 v4 的区别

Vue2使用VueRouter用的是v3版本的Router，而Vue3使用的是v4版本的，在使用过程中发现了一些不一样的用法。总结一下。 更多可见VueRouter官网

路由模式

1. 创建路由不再使用 new Router()，而是引入调用createRouter（）方法。
2. 路由模式从mode改为history， 值也发生变化。

V3	V4
history	createWebHistory()
hash	createWebHashHistory()
abstract	createMemoryHistory()

路由跳转

组件跳转方式没有什么变化，主要是编程式导航这块，如果使用组合式API,则需要通过调用useRouter()来访问路由器。还可以通过调用useRoute()来获取路由信息。

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
          ...query,
        },
      })
    }
  },
}

Pinia🍍

Vue最新官网中，将Vue的状态管理库从Vuex改为Pinia。Pinia对Vue2和Vue3都有用。与传统的 Vuex 不同，Pinia 不依赖于全局对象，而是通过创建独立的 store 实例来管理状态。

步骤

第一步：安装

npm i pinia

第二步：在src目录下，创建stores文件夹，并新建counter.js文件

第三步：创建实例

// main.js
+ import { createPinia } from 'pinia'
+ const pinia = createPinia()
+ app.use(pinia)

第四步：创建仓库

// counter.js
import { defineStore } from "pinia"

// store 是用 defineStore 定义的
// 第一个参数是独一无二的，是Store的唯一ID【必传】
// 第二个参数可接受 Setup函数 或 Option对象
// Options🌰：
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})
// Setup🌰：
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

使用Store

<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
// store不能直接解构，会破坏响应性，需要使用storeToRefs()
const { name, doubleCount } = storeToRefs(store)
</script>

Vuex、Pinia对比

Vuex	Pinia
state	ref 和 reactive 创建的响应式数据
getters	computed 创建的计算属性
mutations 、 actions	普通函数