做PPT不錯的網站有哪些網站優(yōu)化推廣平臺
引言
隨著Vue 3的推出，Pinia應運而生，成為官方推薦的狀態(tài)管理庫，旨在替代Vuex。Pinia與Vuex相比，帶來了以下主要區(qū)別和優(yōu)勢：
- 更簡潔的API：Pinia的API設計更加直觀和簡潔，易于理解和使用。
- 更好的TypeScript支持：Pinia從一開始就考慮了TypeScript的集成，使得類型安全的代碼編寫更加方便。
- 模塊化：Pinia支持模塊化store，使得狀態(tài)管理更加靈活和可擴展。
- 無需映射輔助函數：Pinia不需要像Vuex那樣使用map輔助函數，簡化了組件中的狀態(tài)訪問。
說人話，升級版的vuex
Pinia簡介
Pinia 是一個為 Vue.js 設計的狀態(tài)管理庫，它在 Vue 3 中得到了官方的支持。Pinia 的設計目標是提供一個簡單、輕量級且可擴展的狀態(tài)管理解決方案，它旨在替代 Vuex 4，后者是 Vue 2 的官方狀態(tài)管理庫。Pinia 的設計哲學是盡可能地簡化狀態(tài)管理，同時保持足夠的靈活性以適應各種規(guī)模的應用。
Pinia的誕生背景和目標
隨著 Vue 3 的推出，其引入了 Composition API，這為狀態(tài)管理提供了新的可能性。Pinia 的誕生正是為了充分利用 Composition API 的優(yōu)勢，提供一個更加現(xiàn)代化和簡潔的狀態(tài)管理庫。
Pinia與Vuex 4的主要區(qū)別
Pinia 與 Vuex 4 相比，引入了許多改進和新特性：
- API 設計：Pinia 的 API 設計更加簡潔，去除了 Vuex 4 中的一些復雜概念，如 mutations。
- TypeScript 支持：Pinia 從一開始就考慮了 TypeScript 的集成，提供了更好的類型支持。
- 模塊化：Pinia 支持模塊化 store，每個模塊可以有自己的 state、getters、actions 和 mutations。
- 無需映射輔助函數：在 Pinia 中，你不需要使用 mapState、mapGetters 等輔助函數，可以直接在組件中使用 store。
Pinia的核心概念（store、state、getters、actions）
Pinia 的核心概念與 Vuex 類似，但進行了簡化和改進：
- Store：Pinia 的 store 是狀態(tài)管理的基本單位，每個應用可以有多個 store。一個 store 包含了應用狀態(tài)（state）、計算屬性（getters）、以及修改狀態(tài)的方法（actions）。
- State：State 是應用的當前狀態(tài)，它是一個響應式的 JavaScript 對象。在 Pinia 中，state 可以是任何類型的數據。
- Getters：Getters 類似于 Vue 的計算屬性，它們是基于 state 的派生狀態(tài)。Getters 可以用來返回經過計算或轉換的 state，或者用來實現(xiàn)一些通用的邏輯。
- Actions：Actions 是用來修改 state 的方法。在 Pinia 中，actions 可以是同步的，也可以是異步的。與 Vuex 不同，Pinia 不再區(qū)分 actions 和 mutations，所有的狀態(tài)修改方法都稱為 actions。
安裝和設置Pinia
如何在Vue 3項目中安裝Pinia
1.安裝Pinia：
使用npm或yarn來安裝Pinia庫。在項目根目錄下打開終端，執(zhí)行以下命令之一：
npm install pinia
或者
yarn add pinia
2.創(chuàng)建Pinia實例：
在你的主文件（通常是main.js或main.ts）中，引入并創(chuàng)建Pinia實例：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const app = createApp(App)
const pinia = createPinia()app.use(pinia)
app.mount('#app')
創(chuàng)建第一個Pinia store的步驟
1.創(chuàng)建Store文件：
在項目中創(chuàng)建一個新的文件夾，例如stores，并在其中創(chuàng)建一個新的文件，例如counterStore.js。
2.定義Store：
在counterStore.js文件中，使用defineStore函數定義你的store
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},actions: {increment() {this.count++},decrement() {this.count--}}
})
在Vue組件中使用Pinia store
1.引入Store：
在需要使用store的組件中，引入你剛才創(chuàng)建的store：
import { useCounterStore } from '@/stores/counterStore'
2.使用Store：
在組件的setup函數中，使用useCounterStore來獲取store實例，并訪問其狀態(tài)和方法：
import { useCounterStore } from '@/stores/counterStore'
import { ref } from 'vue'export default {setup() {const counterStore = useCounterStore()const count = ref(counterStore.count)function increment() {counterStore.increment()}function decrement() {counterStore.decrement()}return { count, increment, decrement }}
}
3.模板中使用：
在組件的模板部分，你可以直接使用count變量和increment、decrement方法：
<template><div><h1>Count: {{ count }}</h1><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template>使用pinia-plugin-persistedstate持久化存儲（組件式為例）
下面是一個類似的示例，展示了如何在 Pinia store 中使用組件式的持久化存儲：
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';export const useCounterStore = defineStore('counter', () => {// 定義狀態(tài)const count = ref(100);const msg = ref('hello pinia');// 定義方法const addCount = () => count.value++;const subCount = () => count.value--;// 定義計算屬性const double = computed(() => count.value * 2);// 返回狀態(tài)和方法return {count,addCount,subCount,double,msg,};
}, {// 持久化配置persist: {key: 'hahaha', // 持久化存儲的鍵名paths: ['count', 'msg'], // 指定需要持久化的狀態(tài)路徑},
});
在這個示例中，我們定義了一個名為?useCounterStore?的 Pinia store，其中包含?count?和?msg?兩個狀態(tài)，以及?addCount、subCount?兩個方法來修改?count?的值。我們還定義了一個計算屬性?double，用于計算?count?的兩倍。
在?persist?配置中，我們指定了?key?為?'hahaha'，這將作為存儲在本地存儲中的鍵名。paths?數組包含了需要持久化的狀態(tài)路徑，這里我們指定了?count?和?msg。
當熱還有其他的persist配置，不太常用就不講了，有興趣的小伙伴可以去官網查看（結尾會放）
Pinia進階特性
插件系統(tǒng)和自定義插件的創(chuàng)建
Pinia 提供了一個強大的插件系統(tǒng)，允許開發(fā)者擴展其功能。創(chuàng)建自定義插件可以讓你添加全局狀態(tài)、攔截actions、添加全局getters等。
1.創(chuàng)建插件：
創(chuàng)建一個插件通常涉及定義一個函數，該函數接收一個Pinia實例作為參數，并對其進行操作。
export function myPiniaPlugin(pinia) {// 可以在這里添加全局狀態(tài)、攔截actions等
}
2.使用插件：
在創(chuàng)建Pinia實例時，可以將插件添加到實例中。
const pinia = createPinia()
pinia.use(myPiniaPlugin)
模塊化store和命名空間
Pinia 支持模塊化store，允許你將不同的狀態(tài)邏輯分割到不同的文件中，提高代碼的可維護性。
1.定義模塊化store：
在模塊化store中，你可以定義自己的state、getters和actions。
// store/modules/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() {this.count++},decrement() {this.count--}}
})
2.使用命名空間：
在模塊化store中，你可以使用命名空間來避免不同模塊間的命名沖突。
// store/modules/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() {this.count++},decrement() {this.count--}}
}, {// 開啟命名空間namespaced: true
})
3.在組件中使用模塊化store：
在組件中，你可以通過命名空間來訪問特定模塊的狀態(tài)和actions。
import { useCounterStore } from '@/stores/modules/counter'const counterStore = useCounterStore()
console.log(counterStore.count) // 使用命名空間訪問狀態(tài)
counterStore.increment() // 使用命名空間訪問actions?資料推薦
配置 | pinia-plugin-persistedstate官網
總結
掌握 Pinia 的使用，將有助于你在開發(fā) Vue 3 應用時，更加高效地管理復雜的狀態(tài)邏輯，提升應用的整體性能和用戶體驗。希望本文能為你在使用 Pinia 進行狀態(tài)管理時提供有價值的參考和指導。