介绍
在大多数情况下，state 都是 store的核心，项目一般都是优先定义能代表他们APP的state,在pinia中，state 被定义为一个返回初始状态的函数，这使得Pinia可以同时支持服务端和客户端。
import { defineStore } from 'pinia'const useStore = defineStore('storeId', {// 为了完整类型推理，推荐使用箭头函数state: () => {return {// 所有这些属性都将自动推断出它们的类型count: 0,name: 'Eduardo',isAdmin: true,items: [],hasChanged: true,}},
})
兼容TypeScript
你并不需要做太多努力就能使你的 state 兼容 TS。确保启用了 strict，或者至少启用了 noImplicitThis，Pinia 将自动推断您的状态类型！ 但是，在某些情况下，您应该帮助它进行一些转换：
interface UserInfo {name: stringage: number
}const useStore = defineStore('storeId', {state: () => {return {// 用于初始化空列表userList: [] as UserInfo[],// 用于尚未加载的数据user: null as UserInfo | null,}},
})也可以用一个接口定义state，并添加 state() 的返回这类型：
interface State {userList: UserInfo[]user: UserInfo | null
}
interface UserInfo {name: stringage: number
}
const useStore = defineStore('storeId', {state: (): State => {return {userList: [],user: null,}},
})访问state
默认情况
通过store实例访问state，直接进行读写：
const store = useStore()
store.count++
重置
选项式API中，可以通过$reset()方法重置：
const store = useStore()
store.$reset()
在组合式API(setup stores)中，需要自己创建$reset()方法：
export const useCounterStore = defineStore('counter', () => {const count = ref(0)function $reset() {count.value = 0}return { count, $reset }
})
使用选项式 API 的用法
#例子
#路径 ./src/stores/counter.js
import { defineStore } from 'pinia'
const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),
})
如果你不能使用组合式 API，但你可以使用 computed，methods，…，那你可以使用 mapState() 辅助函数将 state 属性映射为只读的计算属性：
import { mapState } from 'pinia'
import { useCounterStore } from '../stores/counter'export default {computed: {// 可以访问组件中的 this.count// 与从 store.count 中读取的数据相同...mapState(useCounterStore, ['count'])// 与上述相同，但将其注册为 this.myOwnName...mapState(useCounterStore, {myOwnName: 'count',// 你也可以写一个函数来获得对 store 的访问权double: store => store.count * 2,// 它可以访问 `this`，但它没有标注类型...magicValue(store) {return store.someGetter + this.count + this.double},}),},
}
可修改的 state
如果你想修改这些 state 属性 (例如，如果你有一个表单)，你可以使用 mapWritableState() 作为代替。但注意你不能像 mapState() 那样传递一个函数：
import { mapWritableState } from 'pinia'
import { useCounterStore } from '../stores/counter'export default {computed: {// 可以访问组件中的 this.count，并允许设置它。// this.count++// 与从 store.count 中读取的数据相同...mapWritableState(useCounterStore, ['count'])// 与上述相同，但将其注册为 this.myOwnName...mapWritableState(useCounterStore, {myOwnName: 'count',}),},
}
变更 state
除了用 store.count++ 直接改变 store，你还可以调用 $patch 方法。它允许你用一个 state 的补丁对象在同一时间更改多个属性：
store.$patch({count: store.count + 1,age: 120,name: 'DIO',
})
不过，用这种语法的话，有些变更真的很难实现或者很耗时：任何集合的修改（例如，向数组中添加、移除一个元素或是做 splice 操作）都需要你创建一个新的集合。因此，$patch 方法也接受一个函数来组合这种难以用补丁对象实现的变更。
store.$patch((state) => {state.items.push({ name: 'shoes', quantity: 1 })state.hasChanged = true
})
替换 state
你不能完全替换掉 store 的 state，因为那样会破坏其响应性。但是，你可以 patch 它。
// 这实际上并没有替换`$state`
store.$state = { count: 24 }
// 在它内部调用 `$patch()`：
store.$patch({ count: 24 })
你也可以通过变更 pinia 实例的 state 来设置整个应用的初始 state。这常用于 SSR 中的激活过程。
pinia.state.value = {}
订阅 state
类似于 Vuex 的 subscribe 方法，你可以通过 store 的 $subscribe() 方法侦听 state 及其变化。比起普通的 watch()，使用 $subscribe() 的好处是 subscriptions 在 patch 后只触发一次 (例如，当使用上面的函数版本时)。
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 // 传递给 cartStore.$patch() 的补丁对象。// 每当状态发生变化时，将整个 state 持久化到本地存储。localStorage.setItem('cart', JSON.stringify(state))
})
默认情况下，state subscription 会被绑定到添加它们的组件上 (如果 store 在组件的 setup() 里面)。这意味着，当该组件被卸载时，它们将被自动删除。如果你想在组件卸载后依旧保留它们，请将 { detached: true } 作为第二个参数，以将 state subscription 从当前组件中分离：
<script setup>
const someStore = useSomeStore()
// 此订阅器即便在组件卸载之后仍会被保留
someStore.$subscribe(callback, { detached: true })
</script>
你可以在 pinia 实例上使用 watch() 函数侦听整个 state。
watch(pinia.state,(state) => {// 每当状态发生变化时，将整个 state 持久化到本地存储。localStorage.setItem('piniaState', JSON.stringify(state))},{ deep: true }
)
)
