首先你完成了如下：
Vite+vue3+Ts+pinia實(shí)戰(zhàn)（一：初始、基礎(chǔ)安裝励背、踩坑）
初始目錄：
image.png
一春霍、先裝路由、pinia叶眉、UI庫
npm install vue-router@4
npm install pinia
npm install element-plus --save
此時(shí)package.json
{
"name": "cq-function",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"element-plus": "^2.2.10",
"pinia": "^2.0.16",
"vue": "^3.2.37",
"vue-router": "^4.1.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.0",
"typescript": "^4.6.4",
"vite": "^3.0.0",
"vue-tsc": "^0.38.4"
}
}
二址儒、新建并使用router、store衅疙、UI庫
2.1 在src目錄下新建router\index.ts如下：
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
// 路由懶加載
component: () => import("../components/HelloWorld.vue"),
},
],
});
export default router;
2.2 在src目錄下新建store\index.ts如下：
// store/index.ts
import { defineStore } from "pinia";
// defineStore(key,options) 必須傳遞一個(gè)唯一key作為標(biāo)識(shí)
export const useCounterStore = defineStore("counterStore", {
state: () => ({
counter: 0,
}),
actions: {
// 方法 可以是異步 async addCounter(){}
// 在這里也可以訪問其他的store
addCounter() {
this.counter++;
},
},
getters: {
doubleCounter(state): number {
// 可以使用this
// return this.counter * 2
// 在這里也可以訪問其他的store
return state.counter * 2;
},
},
});
2.3 修改App.vue
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>
<template>
<div>
<a target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<router-view />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
2.4 修改main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入餓了么UI庫以及對(duì)應(yīng)的樣式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入路由模塊
import router from './router'
// 引入Store
import { createPinia } from 'pinia'
// 鏈?zhǔn)骄幊?use(router).use(createPinia()).use(ElementPlus)
createApp(App).use(router).use(createPinia()).use(ElementPlus).mount('#app')
2.5 修改HelloWorld.vue
<template>
<h1>HelloWorld</h1>
<h3>counter:{{ counter }}</h3>
<h3>doubleCounter:{{ doubleCounter }}</h3>
<el-button @click="addCounter">counter++</el-button>
<br />
<el-button @click="replaceStore">替換state狀態(tài)值</el-button>
</template>
<script setup lang='ts'>
import { storeToRefs } from "pinia";
import { useCounterStore } from "../store";
const counterStore = useCounterStore();
// 第一次改變store狀態(tài) $path對(duì)象形式
// const addCounter = () => {
// counterStore.$patch({
// counter: counterStore.counter + 1
// })
// }
// 第二種修改store狀態(tài) $path 傳遞回調(diào)函數(shù) 第一個(gè)參數(shù)就是state
// const addCounter = () => {
// counterStore.$patch((store) => {
// store.counter++
// })
// }
// 第三種修改store狀態(tài) 直接通過store修改
// const addCounter = () => {
// counterStore.counter++
// }
// 第四種修改store狀態(tài)
const addCounter = () => {
counterStore.addCounter();
};
// 訪問state的狀態(tài)兩個(gè)方法
// !不能這樣使用 因?yàn)閬G掉了響應(yīng)式
// const { counter, doubleCounter } = counterStore
// 一使用pinia自帶的storeToRefs
const { counter, doubleCounter } = storeToRefs(counterStore);
// 二使用vue的computer 從store中讀取
// const counter = computed(() => counterStore.counter)
// const doubleCounter = computed(() => counterStore.doubleCounter)
// 替換狀態(tài)已有的屬性值 相當(dāng)于重新賦值而已
const replaceStore = () => {
counterStore.$state = { counter: 20 };
};
</script>
至此：路由莲趣，pinia、ui庫的安裝以及使用完事炼蛤。當(dāng)然這里只是簡(jiǎn)單的講怎么使用妖爷，更具體的參考官方文檔。再第一篇里有官方文檔鏈接，這里就不重復(fù)復(fù)述了絮识。
