目錄
0前言
1 手動添加Pinia
2 創建與使用倉庫（Setup Store 組合式）
2.1 創建倉庫
2.2 使用倉庫數據
2.3 解構響應式數據
3 持久化插件
0前言
官網：Pinia | The intuitive store for Vue.js
1 手動添加Pinia
上手之后，可以通過create-vue腳手架勾選Pinia快速添加
第一步：安裝Pinia
在沒有Pinia的相目中，執行以下命令
npm i pinia第二步：在main.js中添加pinia
此處為VUE3的操作，VUE2的操作請見官方文檔：開始 | Pinia
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia() // 創建Pinia實例
const app = createApp(App) // 創建根實例app.use(pinia) // pinia插件的安裝配置
app.mount('#app') // 視圖的掛載也可以用鏈式寫法：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia()createApp(App).use(pinia).mount('#app')2 創建與使用倉庫（Setup Store 組合式）
另一種方式（Option Store 選項式）見?定義 Store | Pinia?
2.1 創建倉庫
你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同時以 `use` 開頭且以 `Store` 結尾。
(比如 `useUserStore`，`useCartStore`，`useProductStore`)
第一個參數是你的應用中 Store 的唯一 ID
// store/count.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'export const usecountStore = defineStore('count', () => {// ———————————————————聲明數據 state—————————————————————const number1 = ref(1)// ———————————————————聲明方法 actions—————————————————————const addNum = () => {// 同步number1.value++}const subNum = () => {// 異步 - 模擬異步，1s后操作setTimeout(() => {number1.value--}, 1000)}// ———————————————————聲明計算屬性—————————————————————const doubleNum = computed(() => number1.value * 2)// ———————————————————導出屬性與方法—————————————————————return {number1,addNum,subNum,doubleNum}
})2.2 使用倉庫數據
<script setup>
// 導入倉庫
import { usecountStore } from '@/store/count'
// 獲取數據
const count = usecountStore()
</script><template><div>number1: {{ count.number1 }}</div><div>doubleNumber1: {{ count.doubleNum }}</div><button @click="count.addNum">+1</button><button @click="count.subNum">-1</button>
</template><style scoped></style>2.3 解構響應式數據
直接解構倉庫中的響應式數據時，會得到非響應式的數據，需要用pinia中的 storeToRefs() 方法
注意：actions不需要！因為我們并不會改方法
<script setup>import { storeToRefs } from 'pinia'
const store = useCounterStore()// `name` 和 `doubleCount` 是響應式的 ref
// 同時通過插件添加的屬性也會被提取為 ref
// 并且會跳過所有的 action 或非響應式 (不是 ref 或 reactive) 的屬性const { name, doubleCount } = storeToRefs(store)// 作為 action 的 increment 可以直接解構const { increment } = store</script>3 持久化插件
官網：Pinia Plugin Persistedstate
vue2持久化插件：GitHub - robinvdvleuten/vuex-persistedstate
第一步：安裝插件 pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate第二步：在main.js中使用
import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))第三步：在倉庫中配置
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'export const useCounterStore = defineStore('counter', () => {...return {count,doubleCount,increment}
}, {persist: true //只需要配置這里
})
