學習源碼可以看我的個人前端學習筆記 (github.com):qdxzw/frontlearningNotes

覺得有幫助的同學，可以點心心支持一下哈（筆記是根據b站上學習的尚硅谷的前端視頻【張天禹老師】，記錄一下學習筆記，用于自己復盤，有需要學習的可以去b站學習原版視頻）

一、準備一個效果

App組件：

<template><Count></Count><br /><LoveTalk></LoveTalk>
</template><script setup lang="ts" name="App">
import Count from './components/Count.vue'
import LoveTalk from './components/LoveTalk.vue'
</script><style scoped></style>

Count組件：

<template><div class="count"><h2>當前求和為：{{ sum }}</h2><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">加</button><button @click="minus">減</button></div>
</template><script setup lang="ts" name="Count">
import { ref } from 'vue'
// 數據
let sum = ref(1) //當前求和
let n = ref(1) //用戶選擇的數據
// 方法
function add () {sum.value += n.value
}
function minus () {sum.value -= n.value
}
</script><style scoped>
.count {padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;background-color: skyblue;
}
select,
button {margin: 0px 5px;height: 25px;
}
</style>

LoveTalk組件：

<template><div class="talk"><button @click="getLoveTalk">獲取一句土味情話</button><ul><li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li></ul></div>
</template><script setup lang="ts" name="LoveTalk">
import { reactive } from 'vue'
import axios from 'axios'
import { nanoid } from 'nanoid'
import { title } from 'process'
// 數據
let talkList = reactive([{id: 'wad1',title: '莫文蔚的陰天，孫燕姿的雨天，周杰倫的晴天，都不如你和我聊天。'},{id: 'wad2',title: '“你為什么要害我?”“害你什么?”“害我那么喜歡你!”'},{id: 'wad3',title: '你知道你和星星有什么區別嗎?星星在天上，你在我心里。'}
])
// 方法
async function getLoveTalk () {// 發請求let result = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把請求回來的字符串，包裝成一個對象let obj = { id: nanoid(), title: result.data.content }talkList.unshift(obj)
}
</script>
<style scoped>
.talk {padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;background-color: orange;
}
select,
button {margin: 0px 5px;height: 25px;
}
</style>

二、搭建 pinia 環境

第一步：npm install pinia

第二步：操作src/main.ts

import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia，用于創建pinia */
import { createPinia } from 'pinia'/* 創建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

此時開發者工具中已經有了pinia選項

三、存儲+讀取數據

1. Store是一個保存：狀態、業務邏輯 的實體，每個組件都可以讀取、寫入它。
2. 它有三個概念：state、getter、action，相當于組件中的： data、 computed 和 methods。
3. 具體編碼：src/store/count.ts

import { defineStore } from "pinia";
export const useCountStore = defineStore("count", {// 真正存儲數據的地方state() {return {sum: 6,};},
});

1. 具體編碼：src/store/talk.ts

// 引入defineStore用于創建store
import { defineStore } from "pinia";// 定義并暴露一個store
export const useTalkStore = defineStore("talk", {// 動作actions: {},// 狀態state() {return {talkList: [{id: "wad1",title: "莫文蔚的陰天，孫燕姿的雨天，周杰倫的晴天，都不如你和我聊天。",},{id: "wad2",title: "“你為什么要害我?”“害你什么?”“害我那么喜歡你!”",},{id: "wad3",title: "你知道你和星星有什么區別嗎?星星在天上，你在我心里。",},],};},
});

1. 組件中使用state中的數據

<template><div class="count"><h2>當前求和為：{{ sumStore.sum }}</h2><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">加</button><button @click="minus">減</button></div>
</template>
<script setup lang="ts" name="Count">
import { ref } from 'vue'
import { useCountStore } from '@/store/count'
// 數據
let sumStore = useCountStore()
let n = ref(1) //用戶選擇的數據
// 方法
function add () {sumStore.sum += n.value
}
function minus () {sumStore.sum -= n.value
}
</script>

<template><div class="talk"><button @click="getLoveTalk">獲取一句土味情話</button><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.title }}</li></ul></div>
</template>
<script setup lang="ts" name="LoveTalk">
import { reactive } from 'vue'
import axios from 'axios'
import { nanoid } from 'nanoid'
import { useTalkStore } from '@/store/talk'
// 數據
let talkStore = useTalkStore()
// 方法
async function getLoveTalk () {// 發請求let result = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把請求回來的字符串，包裝成一個對象let obj = { id: nanoid(), title: result.data.content }talkStore.talkList.unshift(obj)
}
</script>

四、修改數據(三種方式)

1. 第一種修改方式，直接修改countStore.sum = 666
2. 第二種修改方式：批量修改

countStore.$patch({sum:999,school:'atguigu'
})

1. 第三種修改方式：借助action修改（action中可以編寫一些業務邏輯）

import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {/*************/actions: {//加increment(value:number) {if (this.sum < 10) {//操作countStore中的sumthis.sum += value}},//減decrement(value:number){if(this.sum > 1){this.sum -= value}}},/*************/
})

1. 組件中調用action即可

// 使用countStore
const countStore = useCountStore()// 調用對應action
countStore.incrementOdd(n.value)

五、storeToRefs

• 借助storeToRefs將store中的數據轉為ref對象，方便在模板中使用。
• 注意：pinia提供的storeToRefs只會將數據做轉換，而Vue的toRefs會轉換store中所有數據包括方法。

<template><div class="count"><h2>當前求和為：{{sum}}</h2></div>
</template><script setup lang="ts" name="Count">import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs轉換countStore，隨后解構 */const {sum} = storeToRefs(countStore)
</script>

六、getters

1. 概念：當state中的數據，需要經過處理后再使用時，可以使用getters配置。
2. 追加getters配置。

// 引入defineStore用于創建store
import {defineStore} from 'pinia'// 定義并暴露一個store
export const useCountStore = defineStore('count',{// 動作actions:{/************/},// 狀態state(){return {sum:1,school:'atguigu'}},// 計算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}}
})

1. 組件中讀取數據：

const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

七、$subscribe（訂閱）

通過 store 的 $subscribe() 方法偵聽 state 及其變化，類似于watch

mutate：本次修改的信息

state：真正修改的數據

talkStore.$subscribe((mutate, state) => {localStorage.setItem('talkList', JSON.stringify(talkList.value))
})

八、store組合式寫法

import { defineStore } from "pinia";
import axios from "axios";
import { nanoid } from "nanoid";
import { reactive } from "vue";export const useTalkStore = defineStore("talk", () => {// talkList就是stateconst talkList = reactive(JSON.parse(localStorage.getItem("talkList") as string) || []);// getATalk函數相當于actionasync function getLoveTalk() {// 發請求，下面這行的寫法是：連續解構賦值+重命名let {data: { content: title },} = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json");// 把請求回來的字符串，包裝成一個對象let obj = { id: nanoid(), title };// 放到數組中talkList.unshift(obj);}return { talkList, getLoveTalk };
});