Pinia 是 Vue.js 的一款狀態管理庫,它是 Vuex 的替代方案(雖然 Vuex 依然可用,但 Pinia 在很多方面展現出了優勢),旨在為 Vue 開發者提供一種簡潔、直觀且功能強大的狀態管理方式。
以下是一個在 Vue 3 項目中使用 Pinia 進行狀態管理的基本實例,展示了其常見的使用步驟和方式:
1、安裝vue3環境
使用 npm安裝:
npm init vite@latest
使用 Yarn:
yarn create vite
使用 pnpm:
pnpm create vite
然后按照實際需求一步一步操作,如下圖示例:
pinia安裝過程
2、安裝 Pinia
通過命令行安裝 Pinia:
npm install pinia
# 或者使用 yarn
yarn add pinia
- 在 Vue 項目中掛載 Pinia 實例
main.ts(如果是使用 TypeScript 的項目)文件中掛載 Pinia,示例代碼如下:
// main.js
import { createApp } from 'vue'
//引入pinia
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
//創建實體
const pinia = createPinia()
//應用實體
app.use(pinia)
app.mount('#app')
4、定義 Store
創建一個store目錄(可根據實際項目結構自行調整),在該目錄下新建counters.ts文件來定義一個簡單的計數器相關的store,說到這里有兩種定義的方法:
(1)使用選項 API定義,主要是指實例應用的環節:
// counter.js
import { defineStore } from 'pinia'
// 第一個參數是應用程序中 store 的唯一 id
export const useCountStore = defineStore('counter', {
// state 是用于存儲狀態數據的函數,返回一個對象,類似與組件中data,定義變量
state: () => ({
count: 0
}),
// getters 類似于計算屬性,用于改變 state 數據
getters: {
doubleCount: (state) => state.count * 2
},
// actions 用來定義改變 state 的方法,可以是異步操作等,相當于組件中methods
actions: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})
(2)用setup方式定義
import { defineStore } from "pinia";
import { ref, computed } from 'vue'
export const useCountStore = defineStore('count',() => {
//定義變量
const count = ref(0)
//定義修改數據的方法
const doubleCount = computed(()=>count.value*2)
const increment = () => {
count.value ++;
}
const decrement = () => {
count.value --;
}
//以對象的形式return
return {
count,
doubleCount,
increment,
decrement
}
})
- 在組件中使用 Store
以下是在一個 Vue 組件(例如CounterView.vue)中使用上述定義的counte store的示例:
<template>
<div>當前計數:{{count}}</div>
<div>當前雙倍計數:{{useCount.doubleCount}}</div>
<button @click="useCount.increment()">加一</button>
<button @click="useCount.decrement()">減一</button>
</template>
<script setup lang="ts">
//1、首先引入useCountStore 文件
import { useCountStore } from './store';
import { storeToRefs } from 'pinia'
//2、
const useCount = useCountStore();
//用storeToRefs來包裹變量,實現響應式數據。
const { count } = storeToRefs(useCount)
</script>
<style scoped>
</style>