大家好，歡迎來到程式視點！我是小二哥！
前言
在VUE專案開發中，一些資料常常被多個元件頻繁使用，為了管理和維護這些資料，就出現了狀態管理模式。
今天小二哥要給大家推薦的不是VueX，而是稱為新一代的狀態管理工具的Pinia.js。
關於Pinia.js
Pinia.js 由 Vue.js團隊成員所開發的，是新一代的 Vuex，即 Vuex5.x，在 Vue3.0 專案的使用中備受推崇。
Pinia.js 定位和特點：
-
完整的 typescript 的支援；
-
極其輕量，壓縮後的體積只有1.6kb;
-
去除 mutations，只有 state，getters，actions（這是我最喜歡的一個特點）；
-
actions 支援同步和非同步；
-
沒有模組巢狀，只有 store 的概念，能夠構建多個 store，store 之間可以自由使用，更好的程式碼分割；
-
關聯 Vue Devtools 鉤子，提供更好地開發體驗；
使用
安裝腳手架vite
首先確保使用的腳手架是vite
// 安裝vite
npm init vite@latest
安裝依賴
npm install pinia --save
以上安裝完成之後，可以在專案根目錄的package.json檔案內找到相關的資訊(部分片段)：
{ "dependencies": { "pinia": "^2.0.11", "vue": "^3.2.25" }, "devDependencies": { "@vitejs/plugin-vue": "^2.2.0", "vite": "^2.8.0" } }
最佳化改造
因為需要在整個專案使用狀態管理，因此需要在 main.js 檔案裡配置，以使它應用到整個應用(app)：
// main.js import { createApp } from 'vue' import App from './App.vue' // 匯入建構函式 import { createPinia } from 'pinia' // 例項化 Pinia const pinia = createPinia() // 建立Vue應用例項app const app = createApp(App) // 應用以外掛形式掛載Pinia例項 app.use(pinia) app.mount('#app')
定義狀態倉庫
// src/store/index.js // 引入倉庫定義函式 import { defineStore } from 'pinia' // 傳入2個引數，定義倉庫並匯出 // 第一個引數唯一不可重複，字串型別，作為倉庫ID以區分倉庫 // 第二個引數，以物件形式配置倉庫的state,getters,actions // 配置 state getters actions export const mainStore = defineStore('main', { // state 類似元件的data選項，函式形式返回物件 state: () => { return { msg: '程式視點', counter: 0 } }, getters: {}, actions: {} })
類似vuex，單獨一個檔案定義狀態倉庫並匯出。 讀取倉庫內狀態並改變 在需要使用狀態的元件內需要先匯入狀態倉庫：
import { mainStore } from "../store/index.js";
再例項化倉庫函式：
const store = mainStore();
即可使用。
Store中State讀取和修改
storeToRefs響應式函式
<template> <button @click="handleClick">修改狀態資料</button> <!-- 模板內不需要加.value --> <p>{{store.counter}}</p> <!-- 或者使用解構之後的 --> <p>{{counter}}</p> </template> <script setup> // 匯入狀態倉庫 import { mainStore } from "../store/index.js"; // 使普通資料變響應式的函式 import { storeToRefs } from "pinia"; // 例項化倉庫 const store = mainStore(); // 解構並使資料具有響應式 const { counter } = storeToRefs(store); // 點選 + 1; function handleClick() { // ref資料這裡需要加.value訪問 counter.value++; } </script>
可以像下面這樣直接修改 state,但一般不建議這麼做。
store.counter += 1;
透過 actions 去修改 state
action 裡可以直接透過 this 訪問。
export const mainStore = defineStore('main', { // state 類似元件的data選項，函式形式返回物件 state: () => { return { msg: '程式視點', counter: 0 } }, getters: {}, actions: { updateCount(){ this.counter += 1; } } })<script lang="ts" setup> import { mainStore } from "../store/index.js"; const store = mainStore(); userStore.updateCount(); </script>
$patch方法
物件形式修改
前面介紹的是少量資料的變更，如果涉及資料比較多，則推薦使用倉庫例項的$patch方法，批次修改，雖然看起來和前面的幾乎沒有區別，但是會加快修改速度，對程式的效能有很大的好處。$patch傳入一個物件，物件的屬性就是各種狀態。
<template> <button @click="handleClick">修改狀態資料</button> <p>{{msg}}</p> <!-- 或者使用解構之後的 --> <p>{{counter}}</p> </template> <script setup> // 匯入狀態倉庫 import { mainStore } from "../store/index.js"; // 使普通資料變響應式的函式 import { storeToRefs } from "pinia"; // 例項化倉庫 const store = mainStore(); // 解構並使資料具有響應式 const { msg,counter } = storeToRefs(store); // 點選 + 1;修改字串 function handleClick() { store.$patch({ msg: "pinia good!", counter: counter.value + 1, }); } </script>
函式形式
上面例子中的$patch也可以傳入一個函式，函式引數為state狀態：
<template> <button @click="handleClick">修改狀態資料</button> <p>{{msg}}</p> <!-- 或者使用解構之後的 --> <p>{{counter}}</p> </template> <script setup> // 匯入狀態倉庫 import { mainStore } from "../store/index.js"; // 使普通資料變響應式的函式 import { storeToRefs } from "pinia"; // 例項化倉庫 const store = mainStore(); // 解構並使資料具有響應式 const { msg,counter } = storeToRefs(store); // 點選 + 1;修改字串 function handleClick() { store.$patch((state) => { state.msg = "pinia good!"; state.counter++; }); } </script>
以上就是關於 Pinia.js 用法的一些介紹。關於Pinia.js的基礎操作可以透過下方閱讀原文檢視。Pinia.js 的內容還遠不止這些，更多內容及使用有待大家自己探索。
Pinia官方文件 https://pinia.vuejs.org/
寫在最後
【程式視點】助力打工人減負，從來不是說說而已！
後續小二哥會繼續詳細分享更多實用的工具和功能。持續關注，這樣就不會錯過之後的精彩內容啦！
如果這篇文章對你有幫助的話，別忘了【點贊】【分享】支援下哦~