您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue項(xiàng)目中如何用Pinia狀態(tài)管理工具”,在日常操作中,相信很多人在Vue項(xiàng)目中如何用Pinia狀態(tài)管理工具問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Vue項(xiàng)目中如何用Pinia狀態(tài)管理工具”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
pinia只有store、getter、actions,么有mutations,簡(jiǎn)化了狀態(tài)管理的操作。
pinia模塊劃分不需要modules
pinia自動(dòng)化代碼拆分
pinia對(duì)ts支持很好以及vue3的composition API
pinia體積更小,性能更好
defineStore( )
方法的第一個(gè)參數(shù):容器的名字,名字必須唯一,不能重復(fù)defineStore( )
方法的第二個(gè)參數(shù):配置對(duì)象,放置state,getters,actionsstate
屬性: 用來(lái)存儲(chǔ)全局的狀態(tài)getters
屬性: 用來(lái)監(jiān)視或者說(shuō)是計(jì)算狀態(tài)的變化的,有緩存的功能actions
屬性: 修改state全局狀態(tài)數(shù)據(jù),可以是異步也可以是同步Pinia
可以用于vue2.x也可以用于vue3.x中
安裝
yarn add pinia -S
main.js
引入
import {createApp} from "vue"
import App from "./app.vue"
import store from "./store/index.js"
const app = createApp(App);
const store = createPinia();
app.use(store).mount("#app")
在store文件夾下新建test.js
import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
state:()=>{
tname:"test",
tnum:0,
},
getters:{
changeTnum(){
console.log("getters")
this.tnum++;
}
},
actions:{
addNum(val){
this.tnum += val
}
},
//持久化存儲(chǔ)配置
presist:{
enable:true,//
strategies:[
{
key:"testId",
storage:localStorage,
paths:['tnum']
}
]
}
})
在用actions的時(shí)候,不能使用箭頭函數(shù),因?yàn)榧^函數(shù)綁定是外部的this。actions里的this指向當(dāng)前store
在store文件夾下新建index.js,便于管理
import {createPinia} from "pinia"
const store = createPinia();
export default store
新建A.vue
組件,引入store模塊和storeToRefs
方法storeToRefs
:解構(gòu)store
中的數(shù)據(jù),使之成為響應(yīng)式數(shù)據(jù)
<template>
<div>
<div> {{tname}}</div>
<div> {{tid}}</div>
<div> tnum: {{tnum}}</div>
<div> {{tchangeNum}}</div>
<div><button @click="tchangeName">修改</button></div>
<div> <button @click="treset">重置</button></div>
<div @click="actionsBtn">actionsBtn</div>
</div>
</template>
<script setup> import { storeToRefs } from 'pinia' import { useStore } from '../store/user' import { useTest } from '../store/test.js' const testStore = useTest(); let { tname, tchangeNum, tnum } = storeToRefs(testStore) </script>
直接修改數(shù)據(jù)與使用$path
修改數(shù)據(jù)相比,官方已經(jīng)明確表示$patch
的方式是經(jīng)過(guò)優(yōu)化的,會(huì)加快修改速度,對(duì)程序的性能有很大的好處。所以如果你是多條數(shù)據(jù)同時(shí)更新狀態(tài)數(shù)據(jù),推薦使用$patch
方式更新。
雖然可以直接修改,但是出于代碼結(jié)構(gòu)來(lái)說(shuō), 全局的狀態(tài)管理還是不要直接在各個(gè)組件處隨意修改狀態(tài),應(yīng)放于actions
中統(tǒng)一方法修改(piain沒(méi)有mutation)。
//直接修改數(shù)據(jù)
tchangeName(){
tname.value = "測(cè)試數(shù)據(jù)";
tnum.value++;
}
//當(dāng)然也可以使用`$path`批量修改
tchangeName(){
testStore.$path(state=>{
state.tname = "測(cè)試數(shù)據(jù)";
state.value = 7;
})
}
直接調(diào)用actions
中的方法,可傳參數(shù)
const actionsBtn = (){
testStore.addNum(5)
}
store
中有$reset
方法,可以直接對(duì)store
中數(shù)據(jù)重置
const treset = (){
testStore.$reset()
}
實(shí)現(xiàn)持久化存儲(chǔ),需要配合以下插件使用
yarn add pinia-plugin-persist
配置store
文件夾下的index.js
文件,引入pinia-plugin-presist
插件
import {createPinia} from "pinia"
import piniaPluginPresist from "pinia-plugin-presist"
const store = createPinia();
store.use(piniaPluginPresist)
export default store
配置stroe文件夾下的test.js文件,使用presist
屬性進(jìn)行配置
import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
state:()=>{
tname:"test",
tnum:0,
},
getters:{
changeTnum(){
console.log("getters")
this.tnum++;
}
},
actions:{
addNum(val){
this.tnum += val
}
},
//持久化存儲(chǔ)配置
presist:{
enable:true,//
strategies:[
{
key:"testId",
storage:localStorage,
paths:['tnum']
}
]
}
})
enable:true
,開啟持久化存儲(chǔ),默認(rèn)為使用sessionStorage
存儲(chǔ)
- strategies
,進(jìn)行更多配置
- key
,不設(shè)置key時(shí),storage的key為definePinia
的第一個(gè)屬性,設(shè)置key值,則自定義storage的屬性名
storage:localStorage
,設(shè)置緩存模式為本地存儲(chǔ)
paths
,不設(shè)置時(shí)對(duì)state
中的所用數(shù)據(jù)進(jìn)行持久化存執(zhí),設(shè)置時(shí)只針對(duì)設(shè)置的屬性進(jìn)行持久化存儲(chǔ)
模塊化實(shí)現(xiàn)即在store對(duì)要使用的模塊新建一個(gè)js文件,比如user.js
文件。然后配置內(nèi)容跟其他模塊一樣,根據(jù)自己需求進(jìn)行設(shè)置,然后在對(duì)應(yīng)頁(yè)面引入。
比如:test.js
獲取user.js
中state
的name
屬性值,在test.js
引入user.js
import { defineStore } from 'pinia'
import { userStore } from "./user.js"
export const useTest = defineStore("testId", {
state: () => {
return {
tid: "111",
tname: "pinia",
tnum: 0
}
},
getters: {
tchangeNum() {
console.log('getters')
return this.tnum + 100
}
},
actions: {
tupNum(val) {
console.log('actions')
this.tnum += val;
},
getUserData() {
console.log(useStore().name);
return useStore().name;
},
},
persist: {
//走的session
enabled: true,
strategies: [
{
key: "my_testId",
storage: localStorage,
paths: ['tnum']
}
]
}
})
user.js
中
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
num: 0,
name: '張三'
}
}
})
A.vue
組件中,調(diào)用test.js
中getUserData
方法就可以得到uesr.js
中的name
值
const actionBtn = () => {
testStore.getUserData()
};
到此,關(guān)于“Vue項(xiàng)目中如何用Pinia狀態(tài)管理工具”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。