Vue項目中如何用Pinia狀態(tài)管理工具
這篇文章主要介紹“Vue項目中如何用Pinia狀態(tài)管理工具”，在日常操作中，相信很多人在Vue項目中如何用Pinia狀態(tài)管理工具問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue項目中如何用Pinia狀態(tài)管理工具”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比興慶網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式興慶網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋興慶地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。
Pinia與Vuex的區(qū)別
使用Pinia
defineStore( ) 方法的第一個參數(shù)：容器的名字，名字必須唯一，不能重復(fù)
defineStore( ) 方法的第二個參數(shù)：配置對象，放置state，getters，actions
state 屬性： 用來存儲全局的狀態(tài)
getters屬性： 用來監(jiān)視或者說是計算狀態(tài)的變化的，有緩存的功能
actions屬性： 修改state全局狀態(tài)數(shù)據(jù)，可以是異步也可以是同步
Pinia可以用于vue2.x也可以用于vue3.x中
yarn add pinia -S
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")
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
}
},
//持久化存儲配置
presist:{
enable:true,//
strategies:[
{
key:"testId",
storage:localStorage,
paths:['tnum']
}
]
}
})
在用actions的時候，不能使用箭頭函數(shù)，因為箭頭函數(shù)綁定是外部的this。actions里的this指向當前store
import {createPinia} from "pinia"
const store = createPinia();
export default store
{{tname}}
{{tid}}
tnum: {{tnum}}
{{tchangeNum}}
修改
重置
actionsBtn
import { storeToRefs } from 'pinia'
import { useStore } from '../store/user'
import { useTest } from '../store/test.js'
const testStore = useTest();
let { tname, tchangeNum, tnum } = storeToRefs(testStore)
直接修改數(shù)據(jù)的兩種方式
直接修改數(shù)據(jù)與使用$path修改數(shù)據(jù)相比，官方已經(jīng)明確表示$patch的方式是經(jīng)過優(yōu)化的，會加快修改速度，對程序的性能有很大的好處。所以如果你是多條數(shù)據(jù)同時更新狀態(tài)數(shù)據(jù)，推薦使用$patch方式更新。
雖然可以直接修改，但是出于代碼結(jié)構(gòu)來說， 全局的狀態(tài)管理還是不要直接在各個組件處隨意修改狀態(tài)，應(yīng)放于actions中統(tǒng)一方法修改（piain沒有mutation）。
//直接修改數(shù)據(jù)
tchangeName(){
tname.value = "測試數(shù)據(jù)"；
tnum.value++;
}
//當然也可以使用`$path`批量修改
tchangeName(){
testStore.$path(state=>{
state.tname = "測試數(shù)據(jù)"；
state.value = 7;
})
}
使用actions修改數(shù)據(jù)
直接調(diào)用actions中的方法，可傳參數(shù)
const actionsBtn = (){
testStore.addNum(5)
}
重置state中數(shù)據(jù)
store中有$reset方法，可以直接對store中數(shù)據(jù)重置
const treset = (){
testStore.$reset()
}
Pinia持久化存儲
yarn add pinia-plugin-persist
import {createPinia} from "pinia"
import piniaPluginPresist from "pinia-plugin-presist"
const store = createPinia();
store.use(piniaPluginPresist)
export default store
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
}
},
//持久化存儲配置
presist:{
enable:true,//
strategies:[
{
key:"testId",
storage:localStorage,
paths:['tnum']
}
]
}
})
enable:true，開啟持久化存儲，默認為使用sessionStorage存儲
- strategies，進行更多配置
- key，不設(shè)置key時，storage的key為definePinia的第一個屬性，設(shè)置key值，則自定義storage的屬性名
storage:localStorage，設(shè)置緩存模式為本地存儲
paths，不設(shè)置時對state中的所用數(shù)據(jù)進行持久化存執(zhí)，設(shè)置時只針對設(shè)置的屬性進行持久化存儲
Pinia模塊化實現(xiàn)
模塊化實現(xiàn)即在store對要使用的模塊新建一個js文件，比如user.js文件。然后配置內(nèi)容跟其他模塊一樣，根據(jù)自己需求進行設(shè)置，然后在對應(yīng)頁面引入。
Pinia中store之間互相調(diào)用
比如：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項目中如何用Pinia狀態(tài)管理工具”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
分享題目：Vue項目中如何用Pinia狀態(tài)管理工具
分享地址：http://weahome.cn/article/jsdhgi.html
重慶分公司
重慶分公司
