---

一、 什么是pinia

Pinia 是 Vue 的專屬狀態管理庫，可以實現跨組件或頁面共享狀態，是 vuex 狀態管理工具的替代品，和 Vuex相比，具備以下優勢

1. 提供更加簡單的API （去掉了 mutation ）
2. 提供符合組合式API風格的API （和 Vue3 新語法統一）
3. 去掉了modules的概念，每一個store都是一個獨立的模塊
4. 搭配 TypeScript 一起使用提供可靠的類型推斷

二、 創建空Vue項目并安裝Pinia

1. 創建空Vue項目

npm init vue@latest

2. 安裝Pinia并注冊

npm i pinia

import { createPinia } from 'pinia'const app = createApp(App)
// 以插件的形式注冊
app.use(createPinia())
app.use(router)
app.mount('#app')

三、 實現counter

核心步驟：

1. 定義store
2. 組件使用store

1- 定義store

import { defineStore } from 'pinia'
import { ref } from 'vue'export const useCounterStore = defineStore('counter', ()=>{// 數據 （state）const count = ref(0)// 修改數據的方法 （action）const increment = ()=>{count.value++}// 以對象形式返回return {count,increment}
})

2- 組件使用store

<script setup>// 1. 導入use方法import { useCounterStore } from '@/stores/counter'// 2. 執行方法得到store store里有數據和方法const counterStore = useCounterStore()
</script><template><button @click="counterStore.increment">{{ counterStore.count }}</button>
</template>

四、 實現getters

getters直接使用計算屬性即可實現

// 數據（state）
const count = ref(0)
// getter (computed)
const doubleCount = computed(() => count.value * 2)

五、 異步action

思想：action函數既支持同步也支持異步，和在組件中發送網絡請求寫法保持一致
步驟：

1. store中定義action
2. 組件中觸發action

1- store中定義action

const API_URL = 'http://geek.itheima.net/v1_0/channels'export const useCounterStore = defineStore('counter', ()=>{// 數據const list = ref([])// 異步actionconst loadList = async ()=>{const res = await axios.get(API_URL)list.value = res.data.data.channels}return {list,loadList}
})

2- 組件中調用action

<script setup>import { useCounterStore } from '@/stores/counter'const counterStore = useCounterStore()// 調用異步actioncounterStore.loadList()
</script><template><ul><li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li></ul>
</template>

六、 storeToRefs保持響應式解構

直接基于store進行解構賦值，響應式數據（state和getter）會丟失響應式特性，使用storeToRefs輔助保持響應式

<script setup>import { storeToRefs } from 'pinia'import { useCounterStore } from '@/stores/counter'const counterStore = useCounterStore()// 使用它storeToRefs包裹之后解構保持響應式const { count } = storeToRefs(counterStore)const { increment } = counterStore</script><template><button @click="increment">{{ count }}</button>
</template>

七、基本使用：

【1】main.js

import { createSSRApp } from 'vue'
import App from './App.vue'// 導入 pinia 實例
import pinia from './stores'
import persist from 'pinia-plugin-persistedstate'
// 使用持久化存儲插件
pinia.use(persist)export function createApp() {// 創建 vue 實例const app = createSSRApp(App)// 使用 piniaapp.use(pinia)return {app,}
}

【2】store=》index.js

import { createPinia } from 'pinia'// 創建 pinia 實例
const pinia = createPinia()// 默認導出，給 main.ts 使用
export default pinia

【3】member.ts

import type { LoginResult } from '@/types/member'
import { defineStore } from 'pinia'
import { ref } from 'vue'// 定義 Store
export const useMemberStore = defineStore('member',() => {// 會員信息const profile = ref<LoginResult>()// 保存會員信息，登錄時使用const setProfile = (val: LoginResult) => {profile.value = val}// 清理會員信息，退出時使用const clearProfile = () => {profile.value = undefined}// 記得 returnreturn {profile,setProfile,clearProfile,}},{// 網頁端配置// persist: true,// 小程序端配置persist: {storage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {uni.setStorageSync(key, value)},},},},
)