Vue3+Pinia 20分鐘快速上手

自我記錄
1.Pinia 是一個(gè)狀態(tài)管理工具牙瓢，它和 Vuex 一樣為 Vue 應(yīng)用程序提供共享狀態(tài)管理能力。
2.語(yǔ)法和 Vue3 一樣，它實(shí)現(xiàn)狀態(tài)管理有兩種語(yǔ)法：選項(xiàng)式API 與 組合式API勺疼，我們學(xué)習(xí)組合式API語(yǔ)法教寂。
3.它也支持 Vue2 也支持 devtools，當(dāng)然它也是類型安全的执庐，支持 TypeScript
4.可以創(chuàng)建多個(gè)全局倉(cāng)庫(kù)酪耕，不用像 Vuex 一個(gè)倉(cāng)庫(kù)嵌套模塊，結(jié)構(gòu)復(fù)雜轨淌。
5.管理數(shù)據(jù)簡(jiǎn)單迂烁，提供數(shù)據(jù)和修改數(shù)據(jù)的邏輯即可，不像Vuex需要記憶太多的API递鹉。
6.Pinia 是一個(gè)簡(jiǎn)單實(shí)用的狀態(tài)管理工具,大小僅有1KB
7.Pinia 官方文檔

image.png

yarn add pinia
# 或者使用 npm
npm install pinia

2.導(dǎo)入盟步，實(shí)例化，當(dāng)做插件使用躏结，和其他插件使用套路相同 /src/main.ts

import { createApp } from 'vue'
// 1. 導(dǎo)入創(chuàng)建pinia的函數(shù)
import { createPinia } from 'pinia'
import App from './App.vue'
// 2. 創(chuàng)建pinia插件實(shí)例
const pinia = createPinia()
const app = createApp(App)
// 3. 使用插件
app.use(pinia)
app.mount('#app')

3.創(chuàng)建倉(cāng)庫(kù)&使用倉(cāng)庫(kù) /src/stores/counter.ts

import { defineStore } from "pinia"
// 創(chuàng)建倉(cāng)庫(kù)
// 1.id 是倉(cāng)庫(kù)的唯一標(biāo)識(shí)却盘，一般文件的名字叫啥就是啥, 方便找對(duì)應(yīng)的倉(cāng)庫(kù) 例如 counter.ts
// 2.storeSteup 類似 Vue3 的 setup 作用:函數(shù)中定義 數(shù)據(jù) 和 函數(shù) 返回, 它們就是store的數(shù)據(jù)和函數(shù)
// 3.options? 額外的配置
// export const uesCounterStore = defineStore("counter", () => {
//  return {}
// })
export const uesCounterStore = defineStore('counter', () => {
    // 定義
    // state
    const count = ref(0)
    // getters
    const doubleCount = computed(() => count.value * 2)
    // mutations (Pinia 不區(qū)分 mutations 和 actions)
    const update = () => count.value++
    // actions
    const asyncUpdate = () => {
        setTimeout(() => {
            count.value += 1000
        }, 1000)
    }
    return {count, doubleCount, update ,asyncUpdate}
})

/src/components/Children.vue

<script setup lang="ts">
// 使用倉(cāng)庫(kù)
import { useCounterStore } from "./stores/counter"
// store中有狀態(tài)和函數(shù)
const store = useCounterStore()
</script>
<template>
  <div class="Children-page">Children-page {{store.count}}--{{store.doubleCount}}</div>
</template>

/src/components/Children.vue

<script setup lang="ts">
// 使用倉(cāng)庫(kù)
import { useCounterStore } from "./stores/counter"
// store中有狀態(tài)和函數(shù)
const store = useCounterStore()
</script>
<template>
  <div class="Children-page">Children-page {{store.count}}--{{store.doubleCount}}</div>
</template>

注意store獲取到后不能解構(gòu)，否則失去響應(yīng)式 可以使用storeToRefs來(lái)解決 storeToRefs的使用
1.使用 storeToRefs 解決解構(gòu)倉(cāng)庫(kù)狀態(tài)丟失響應(yīng)式的問(wèn)題
問(wèn)題：當(dāng)我們想解構(gòu) store 提供的數(shù)據(jù)時(shí)候窜觉，發(fā)現(xiàn)數(shù)據(jù)是沒(méi)有響應(yīng)式的谷炸。
vue 組合式API創(chuàng)建的響應(yīng)式數(shù)據(jù)的時(shí)候，使用 toRefs 保持結(jié)構(gòu)后數(shù)據(jù)的響應(yīng)式
/src/App.vue 使用storeToRefs

<script setup lang="ts">
// 使用倉(cāng)庫(kù)
import { uesCounterStore } from "./stores/counter.ts";
import Children from "./components/Children.vue";
import { storeToRefs } from "pinia"; // 引入storeToRefs
const store = uesCounterStore()
const { count, doubleCount } = storeToRefs(store) // 使用
</script>
</script>
<template>
    // 可以省略store.count=>count
  <div class="App-page">{{ count }}--{{ doubleCount }}
    <button @click="store.update()">改count</button>
    <button @click="store.asyncUpdate()">異步改</button>
  </div>
  <Children></Children>
</template>

數(shù)據(jù)持久化

使用 pinia-plugin-persistedstate 實(shí)現(xiàn)pinia倉(cāng)庫(kù)狀態(tài)持久化