淺析Vue專案中怎麼用Pinia狀態管理工具

Vue專案中怎麼用Pinia狀態管理工具？以下這篇文章帶大家聊聊Vue專案中Pinia狀態管理工具的使用，希望對大家有幫助！

Pinia官網介紹說：Pinia 是 Vue 的儲存庫，它允許您跨元件/頁面共享狀態。 Vuex同樣可以作為狀態管理工具，那麼兩者有什麼差別呢？

Pinia與Vuex的差異

• pinia只有store、getter、actions，麼有mutations，簡化了狀態管理的操作。 【相關推薦：vuejs影片教學、web前端開發】
• 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 &#39;pinia&#39;
import { useStore } from &#39;../store/user&#39;
import { useTest } from &#39;../store/test.js&#39;
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()
};

（学习视频分享：编程基础视频）

以上是淺析Vue專案中怎麼用Pinia狀態管理工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！