>[success] # state 使用 1. 讓state 數據具有響應是 可以使用 vue 的 `toRefs` 和`import { storeToRefs } from "pinia"` 提供的`storeToRefs` 方法 2. 和vuex 不同可以直接修改 store 中的state值即可 * `對應的store. 屬性 = 新屬性` * `對應的store. $patch({.... 修改多個屬性})` * `對應的store.$state={}` 和`$patch`一樣修改多個屬性本質調用的也是`$patch` [源碼參考](https://github1s.com/vuejs/pinia/blob/HEAD/packages/pinia/src/store.ts#L571-L583)  * `對應的store.$reset()` 重置會初始值 3. $subscribe() 方法查看狀態及其變化 ~~~ const subscribe = store.$subscribe( (mutation, state) => { /* * mutation主要包含三個屬性值： * events：當前state改變的具體數據，包括改變前的值和改變后的值等等數據 * storeId：是當前store的id * type：用于記錄這次數據變化是通過什么途徑，主要有三個分別是 * “direct” ：通過 action 變化的 ”patch object“ ：通過 $patch 傳遞對象的方式改變的 “patch function” ：通過 $patch 傳遞函數的方式改變的 * * */ // 在此處監聽store中值的變化，當變化為某個值的時候，做一些業務操作 userName.value = state.userInfo.userName }, { detached: false } // detached:布爾值，默認是 false，正常情況下，當訂閱所在的組件被卸載時，訂閱將被停止刪除， // 如果設置detached值為 true 時，即使所在組件被卸載，訂閱依然在生效 // 參考文檔：https://pinia.web3doc.top/core-concepts/state.html#%E8%AE%A2%E9%98%85%E7%8A%B6%E6%80%81 ) ~~~ >[danger] ##### 案例 * 創建一個store ~~~ // \src\store\modules\users.js import { defineStore } from 'pinia' // 第一個參數是應用程序中 store 的唯一 id export const useUsersStore = defineStore('users', { // 其它配置項 state: () => ({ name: "ww", age: 12, }), }) ~~~ * 使用 ~~~html <template> <div>{{ name1 }}--{{ age }}</div> <div>{{ name2 }}--{{ age }}</div> <div>{{ name3 }}--{{ age }}</div> <button @click="changeName">單個屬性去修改</button> <button @click="changeMore">多個屬性去修改</button> <button @click="replaceInfo">替換</button> <button @click="rest">重置到其初始值</button> </template> <script setup> // 直接導入 defineStore 創建對應位置 store import { toRefs } from "vue"; import { storeToRefs } from "pinia"; import { useUsersStore } from "@/store/modules/users"; // 使用創建的 defineStore 創建的 usersStore 函數 const usersStore = useUsersStore(); // 解構獲取state 數據綁定頁面 // 方式一直接解構 失去響應式 const { name: name1 } = usersStore; // 方式二 使用toRefs const { name: name2 } = toRefs(usersStore); // 方式三 使用 pinia 提供的 storeToRefs const { name: name3, age } = storeToRefs(usersStore); // 修改state 值方法 // 方式一 單個屬性去修改 function changeName() { usersStore.name = "新"; } // 方式二 多個屬性去修改 function changeMore() { usersStore.$patch({ name: "多", age: 22, }); } // 方式三直接替換，替換時候只會修改不同的值并不會刪除之前屬性 function replaceInfo() { // 雖然替換了整個對象 但實際會保留之前age 只修改name usersStore.$state = { name: "zzz", }; } // 其他方法 重置到其初始值 function rest() { usersStore.$reset(); } </script> ~~~ >[info] ## 官網給的小技巧 * 每當它發生變化時，將整個狀態持久化到本地存儲 ~~~ cartStore.$subscribe((mutation, state) => { // import { MutationType } from 'pinia' mutation.type // 'direct' | 'patch object' | 'patch function' // 與 cartStore.$id 相同 mutation.storeId // 'cart' // 僅適用于 mutation.type === 'patch object' mutation.payload // 補丁對象傳遞給 to cartStore.$patch() // 每當它發生變化時，將整個狀態持久化到本地存儲 localStorage.setItem('cart', JSON.stringify(state)) }) ~~~ * 您可以在`pinia`實例上查看整個狀態： ~~~ watch( pinia.state, (state) => { // 每當它發生變化時，將整個狀態持久化到本地存儲 localStorage.setItem('piniaState', JSON.stringify(state)) }, { deep: true } ) ~~~