Vue3+Vite+Ts配置路由、Pinia 配置和简单介绍、配置 SCSS

最新推荐文章于 2025-05-07 17:00:22 发布

原创最新推荐文章于 2025-05-07 17:00:22 发布 · 665 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#scss #vue.js #前端

前端笔记专栏收录该内容

26 篇文章

订阅专栏

这篇博客介绍了如何在Vue 3应用中集成并使用Vue Router和Pinia。首先，详细展示了Vue Router的安装和配置，包括设置路由规则。然后，文章转向Pinia的集成，解释了如何创建和使用Pinia store，以及在组件中访问和操作state、getters和actions。最后，通过一个具体的例子展示了在组件中如何解构store并暴露所需属性。

# 安装
npm install vue-router@4

<!-- src\views\home\index.vue -->
<template>
  <div>
    首页
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

<!-- src\views\home\index.vue -->
<template>
  <div>
    首页
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

<!-- src\App.vue -->
<template>
  <router-view />
</template>

<script setup lang="ts">
</script>

// src\router\index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes:RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/home/index.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue')
  }
]

const router = createRouter({
  // history: createWebHashHistory(), // hash 路由模式
  history: createWebHistory(), // history 路由模式
  routes // 路由规则
})

export default router

// src\main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

集成 Pinia

集成 Pinia

// src\main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

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

定义 Store

Pinia 使用 defineStore() 定义 store，它返回一个用于创建 store 实例的函数：

defineStore() 需要一个唯一的 name（也称为 id）作为第一个参数传递（必填）
defineStore() 约定使用 use... 作为函数名（如 useCartStore）
通过 defineStore() 定义的 store 相当于 Vuex 中的 Module。

// src\store\index.ts
import { defineStore } from 'pinia'

const useStore = defineStore('main', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

export default useStore

使用

store 一旦被实例化，就可以直接访问 state、getters 和 actions。

Pinia 没有 Vuex 的 Mutations，可以在 Actions 中直接使用同步和异步方法。

<!-- src\views\home\index.vue -->
<template>
  <div>
    首页
    <button @click="store.increment">
      {{ store.count }} => {{ store.doubleCount }}
    </button>
  </div>
</template>

<script setup lang="ts">
import useStore from '@/store'

const store = useStore()
</script>

使用解构语法

请注意，store 是一个用 reactive 包装的对象，这意味着访问 state 和 getters 时不需要写 .value，就像 setup 中的 props，我们也不能将其直接解构：

<!-- src\views\home\index.vue -->
<template>
  <div>
    首页
    <button @click="store.increment">
      {{ store.count }} => {{ store.doubleCount }}
    </button>

    <div>count 永远是 0：{{ count }}</div>
    <div>doubleCount 永远是 0：{{ doubleCount }}</div>
  </div>
</template>

<script setup lang="ts">
import useStore from '@/store'

const store = useStore()

const { count, doubleCount } = store
// 在 script-setup 中使用解构赋值要通过 defineExpose 暴漏出去
defineExpose({
  count
})
</script>