Pinia優(yōu)勢(shì)
Pinia是一個(gè)全新的Vue狀態(tài)管理庫(kù)，是Vuex的代替者渊涝，尤雨溪強(qiáng)勢(shì)推薦
1.Vue2 和 Vue3 都能支持
2.拋棄傳統(tǒng)的 Mutation ，只有 state, getter 和 action ，簡(jiǎn)化狀態(tài)管理庫(kù)
3.不需要嵌套模塊屯耸，符合 Vue3 的 Composition api，讓代碼扁平化
4.TypeScript支持
Pinia 基本使用
初始化項(xiàng)目： npm init vite@latest
安裝Pinia: npm i pinia
掛載Pinia
import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia)
創(chuàng)建Store
import { defineStore } from "pinia";
export const useStore = defineStore('main', {
state: () => {
return {
msg: 'hello world hhhh',
Number: 1
}
},
getters: {},
actions: {}
})
使用Store
<template>
<div>HelloWorld</div>
<div>{{store.msg}}</div>
</template>
<script setup lang="ts">
import { useStore } from "../index";
const store = useStore()
</script>
解構(gòu)Store
當(dāng)store中的多個(gè)參數(shù)需要被使用到的時(shí)候蹭劈，為了更簡(jiǎn)潔的使用這些變量疗绣，我們通常采用結(jié)構(gòu)的方式一次性獲取所有的變量名
ES傳統(tǒng)方式解構(gòu)(能獲取到值，但是不具有響應(yīng)性)
<template>
<div>HelloWorld</div>
<div>{{ store.msg }}</div>
<div>{{ number }}</div>
<button @click="number++">+++</button>
</template>
<script setup lang="ts">
import { useStore } from "../index";
const store = useStore();
const { number } = store;
</script>
<style scoped></style>
Pinia解構(gòu)方法：storeToRefs
<template>
<div>HelloWorld</div>
<div>{{ store.msg }}</div>
<div>{{ number }}</div>
<button @click="number++">+++</button>
</template>
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useStore } from "../index";
const store = useStore();
// const { number } = store;
const { number } = storeToRefs(store);
</script>
<style scoped></style>
多條數(shù)據(jù)修改
通過(guò)基礎(chǔ)數(shù)據(jù)修改方式去修改多條數(shù)據(jù)也是可行的铺韧，但是在 pinia 官網(wǎng)中多矮，已經(jīng)明確表示$patch 的方式是經(jīng)過(guò)優(yōu)化的，會(huì)加快修改速度哈打，對(duì)性能有很大好處塔逃，所以在進(jìn)行多條數(shù)據(jù)修改的時(shí)候，更推薦使用$patch
$patch 方法可以接受兩個(gè)類型的參數(shù)料仗，函數(shù) 和 對(duì)象
$patch + 對(duì)象
$patch + 函數(shù)： 通過(guò)函數(shù)方式去使用的時(shí)候湾盗，函數(shù)接受一個(gè) state 的參數(shù)，state 就是 store 倉(cāng)庫(kù)中的 state
const change = () => {
store.$patch({
msg: 'hhhhhhhhhhhh',
number: store.number + 100
})
}
const change1 = () => {
store.$patch((state)=> {
state.msg = 'hhhhhhhhhhhh'
state.number = state.number + 100
})
}
Pinia中的Getters
Pinia 中的 getter 和 Vue 中的計(jì)算屬性幾乎一樣立轧，在獲取 State值之前做一些邏輯處理getter 中的值有緩存特性格粪，如果值沒(méi)有改變，多次使用也只會(huì)調(diào)用一次添加 getter方法
getters: {
addNumber(state) {
return state.number * state.number1
}
},
<div>{{store.addNumber}}</div>
<div>{{store.addNumber}}</div>
<div>{{store.addNumber}}</div> //多次調(diào)用也只會(huì)執(zhí)行一次
getter 中不僅可以傳遞 state 直接改變數(shù)據(jù)狀態(tài)氛改，還可以使用 this 來(lái)改變數(shù)據(jù),但要說(shuō)明對(duì)應(yīng)類型
getters: {
addNumber():any {
// return state.number * state.number1
return this.msg
}
},
store之間的相互調(diào)用
在 Pinia 中匀借，可以在一個(gè) store 中 import 另外一個(gè) store ，然后通過(guò)調(diào)用引入 store 方法的形式平窘，獲取引入 store 的狀態(tài)
export const useStore = defineStore('use', {
state: () => {
return {
msg: 'hello world hhhhxxx',
number: 2,
number1: 3
}
},
getters: {
addNumber():any {
// return state.number * state.number1
return this.msg
}
},
actions: {
}
})
export const mainStore = defineStore('main', {
state: () => {
return {
msg: 'hello world hhhh',
number: 1
}
},
getters: {
addNumber() {
console.log(useStore().msg);
}
},
actions: {}
})
總結(jié)
總得來(lái)說(shuō)吓肋，Pinia 就是 Vuex 的替代版，可以更好的兼容 Vue2瑰艘，Vue3以及TypeScript是鬼。在Vuex的基礎(chǔ)上去掉了 Mutation，只保留了 state, getter和action紫新。Pinia擁有更簡(jiǎn)潔的語(yǔ)法均蜜， 扁平化的代碼編排，符合Vue3 的 Composition api
