定義 Store | Pinia

開發(fā)文檔

1.什么是Pinaia

Pinia 是 Vue 的專屬狀態(tài)管理庫，它允許你跨組件或頁面共享狀態(tài)。

2.理解Pinaia核心概念

定義Store

在深入研究核心概念之前，我們得知道 Store 是用 defineStore() 定義的，它的第一個參數(shù)要求是一個獨一無二的名字：

import { defineStore } from 'pinia'// 你可以對 `defineStore()` 的返回值進行任意命名，但最好使用 store 的名字，同時以 `use` 開頭且以 `Store` 結尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一個參數(shù)是你的應用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {// 其他配置...
})

這個名字 ，也被用作 id ，是必須傳入的， Pinia 將用它來連接 store 和 devtools。為了養(yǎng)成習慣性的用法，將返回的函數(shù)命名為 use... 是一個符合組合式函數(shù)風格的約定。

defineStore() 的第二個參數(shù)可接受兩類值：Setup 函數(shù)或 Option 對象。、

在 Setup Store 中：

• ref() 就是 state 屬性
• computed() 就是 getters
• function() 就是 actions

使用Store

雖然我們前面定義了一個 store，但在我們使用 <script setup> 調(diào)用 useStore()(或者使用 setup() 函數(shù)，像所有的組件那樣) 之前，store 實例是不會被創(chuàng)建的

<script setup>
import { useCounterStore } from '@/stores/counter'
// 可以在組件中的任意位置訪問 `store` 變量 ?
const store = useCounterStore()
</script>

3.狀態(tài)持久化

方法一 整體添加

main.ts入口文件添加整體持久化方案

import {createPinia} from 'pinia'
const pinia = createPinia()
if(localStorage.getItem("pinia")){
pinia.state.value = JSON.parse(localStorage.getItem("pinia"))
}
watch(pinia.state,state=>{
localStorage.setItem("pinia",JSON.stringify(state))
},{deep:true})
app.use(pinia)

方法二 插件

npm i pinia-plugin-persistedstate --save

import {createPinia} from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
import {ref, computed, watch} from 'vue'
import {defineStore} from 'pinia'
//counter是狀態(tài)庫id 或名稱
export const useCounterStore = defineStore('counter', () => {
//變量 state
const count = ref(0)
//計算屬性 getter
const doubleCount = computed(() => count.value * 2)
//方法action
function increment() {
count.value++
}
const user = ref({
name: '',
desc: '一鍵三連'
})
return {count, doubleCount, increment}
}, {persist: true})

結果添加 ,{persist: true} 就可以持久化了

Pinanad的使用

components/Aa.vue 組件

components/Bb.vue組件

stores/counter.js?????選項式的用法

?stores/ token.js???? 組合式寫法

main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { createPinia } from 'pinia'
app.use(createPinia())
app.mount('#app')

App.vue

<script setup>
import {version as v1, ref} from 'vue'
import Bb from "@/components/Bb.vue";
import Aa from "@/components/Aa.vue";
const v2 = ref('2.1.6')
import {useCounterStore} from './stores/counter'
const c = useCounterStore()
import {useTokenStore} from './stores/token'
const us = useTokenStore()
</script><template>{{ v1 }} {{ v2 }}<h1>App</h1><button @click="us.count++">add</button><button @click="us.increment()">increment</button><button @click="c.count++">add</button><button @click="c.increment()">increment</button><p>{{us.count}} ---{{us.doubleCount}}</p><hr><p>{{ c.count }} -- {{ c.doubleCount }}</p><p>{{}}</p><h1>Aa組件</h1><Aa/><h1>BB組件</h1><Bb/></template><style scoped></style>

count.js

import {computed, ref, watch} from 'vue'
import {defineStore} from 'pinia'
export const useCounterStore = defineStore('counter', () => {const count = ref(0)const doubleCount = computed(() => count.value * 2)function increment() {count.value++}return {count, doubleCount, increment}
})

token.js

---

import {defineStore} from 'pinia'export const useTokenStore = defineStore('token', {state: () => {return {count: 0,}},getters: {doubleCount: state => state.count * 2},actions: {increment() {this.count++}},
})

Aa.vue

<script setup>
import {useCounterStore} from '../stores/counter.js'const cc = useCounterStore()import {useTokenStore} from '../stores/token'const us = useTokenStore()</script><template><h1>Aaaaaa</h1><p>Aaa : {{ cc.count }} -- {{ cc.doubleCount }}</p><button @click="cc.count+=5">Aa add +=5</button><p>Aaa : {{ us.count }} -- {{ us.doubleCount }}</p><button @click="us.count+=5">Aa add +=5</button>
</template><style scoped></style>

Ba.vue

<script setup>
import {useCounterStore} from '../stores/counter.js'
const cc = useCounterStore()
</script><template>
<h1>Bb</h1>
<p>Bb : {{cc.count}}  -- {{cc.doubleCount}}</p>
</template><style scoped></style>