# 安装
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>