Vue項目中怎么用Pinia狀態管理工具？下面本篇文章帶大家聊聊Vue項目中Pinia狀態管理工具的使用，希望對大家有所幫助！
Pinia官網介紹說：Pinia 是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態。Vuex同樣可以作為狀態管理工具，那么兩者有什么區別呢？
Pinia與Vuex的區別
pinia只有store、getter、actions，么有mutations，簡化了狀態管理的操作。
pinia模塊劃分不需要modules，
pinia自動化代碼拆分
pinia對ts支持很好以及vue3的composition API
pinia體積更小，性能更好
使用Pinia
defineStore( )方法的第一個參數：容器的名字，名字必須唯一，不能重復
defineStore( )方法的第二個參數：配置對象，放置state，getters，actions
state屬性： 用來存儲全局的狀態
getters屬性： 用來監視或者說是計算狀態的變化的，有緩存的功能
actions屬性： 修改state全局狀態數據，可以是異步也可以是同步
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
}
},
//持久化存儲配置
presist:{
enable:true,//
strategies:[
{
key:"testId",
storage:localStorage,
paths:['tnum']
}
]
}
})在用actions的時候，不能使用箭頭函數，因為箭頭函數綁定是外部的this。actions里的this指向當前store
在store文件夾下新建index.js，便于管理
import {createPinia} from "pinia"
const store = createPinia();
export default store新建A.vue組件，引入store模塊和storeToRefs方法storeToRefs：解構store中的數據，使之成為響應式數據
<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>直接修改數據的兩種方式
直接修改數據與使用$path修改數據相比，官方已經明確表示$patch的方式是經過優化的，會加快修改速度，對程序的性能有很大的好處。所以如果你是多條數據同時更新狀態數據，推薦使用$patch方式更新。
雖然可以直接修改，但是出于代碼結構來說， 全局的狀態管理還是不要直接在各個組件處隨意修改狀態，應放于actions中統一方法修改（piain沒有mutation）。
//直接修改數據
tchangeName(){
tname.value = "測試數據"；
tnum.value++;
}
//當然也可以使用`$path`批量修改
tchangeName(){
testStore.$path(state=>{
state.tname = "測試數據"；
state.value = 7;
})
}使用actions修改數據
直接調用actions中的方法，可傳參數
const actionsBtn = (){
testStore.addNum(5)
}重置state中數據
store中有$reset方法，可以直接對store中數據重置
const treset = (){
testStore.$reset()
}Pinia持久化存儲
實現持久化存儲，需要配合以下插件使用
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屬性進行配置
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，不設置key時，storage的key為definePinia的第一個屬性，設置key值，則自定義storage的屬性名
storage:localStorage，設置緩存模式為本地存儲
paths，不設置時對state中的所用數據進行持久化存執，設置時只針對設置的屬性進行持久化存儲
Pinia模塊化實現
模塊化實現即在store對要使用的模塊新建一個js文件，比如user.js文件。然后配置內容跟其他模塊一樣，根據自己需求進行設置，然后在對應頁面引入。
Pinia中store之間互相調用
比如：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組件中，調用test.js中getUserData方法就可以得到uesr.js中的name值
const actionBtn = () => {
testStore.getUserData()
};
