>[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 } ) ~~~