在大多数情况下,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 将自动推断您的状态类型! 但是,在某些情况下,您应该帮助它进行一些转换:
const useStore = defineStore('storeId', {
state: () => {
return {
// 用于初始化空列表
userList: [] as UserInfo[],
// 用于尚未加载的数据
user: null as UserInfo | null,
}
},
})
interface UserInfo {
name: string
age: number
}
如果你愿意,你可以用一个接口定义 state,并添加 state()
的返回值的类型。
interface State {
userList: UserInfo[]
user: UserInfo | null
}
const useStore = defineStore('storeId', {
state: (): State => {
return {
userList: [],
user: null,
}
},
})
interface UserInfo {
name: string
age: number
}
访问 state
默认情况下,你可以通过 store
实例访问 state,直接对其进行读写。
const store = useStore()
store.count++
重置 state
使用选项式 API 时,你可以通过调用 store 的 $reset()
方法将 state 重置为初始值。
const store = useStore()
store.$reset()
在 $reset()
内部,会调用 state()
函数来创建一个新的状态对象,并用它替换当前状态。
在 Setup Stores 中,您需要创建自己的 $reset()
方法:
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function $reset() {
count.value = 0
}
return { count, $reset }
})
使用选项式 API 的用法
在下面的例子中,你可以假设相关 store 已经创建了:
// 示例文件路径:
// ./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) => {
/*
mutation主要包含三个属性值:
events:当前state改变的具体数据,包括改变前的值和改变后的值等等数据
storeId:是当前store的id
type:用于记录这次数据变化是通过什么途径,主要有三个分别是
direct:通过 action 变化的
patch object:通过 $patch 传递对象的方式改变的
patch function:通过 $patch 传递函数的方式改变的
*/
// 我们就可以在此处监听store中值的变化,当变化为某个值的时候,去做一些业务操作之类的
// 每当状态发生变化时,将整个 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 })
/*
第二个参数options对象,是各种配置参数
detached:布尔值,默认false,正常情况下,当订阅所在的组件被卸载时,订阅将被停止删除;detached值为true时,即使所在组件被卸载,订阅依然在生效。
参数还有immediate,deep,flush等等参数 和vue3 watch的参数是一样的,多的就不介绍了,用到再看文档吧
*/
</script>
//TIP
//你可以在 pinia 实例上使用 watch() 函数侦听整个 state。
//js
watch(
pinia.state,
(state) => {
// 每当状态发生变化时,将整个 state 持久化到本地存储。
localStorage.setItem('piniaState', JSON.stringify(state))
},
{ deep: true }
)
$subscribe与watch的区别:
countStore.$subscribe((mutation, state) => {
console.log(mutation, state)
})
watch(countStore.$state, (newVal, oldValue) => {
console.log(newVal, oldValue)
})
可以发现,无论我们是通过direct的方式直接修改数据,还是通过patch的方式去修改数据,两者都会被触发。但是据官方文档说明,watch捕获不到patch的数据变化,而$subscribe则可以每次都捕获到。因此我们修改我们的patch方法如下(patch object):
// 修改方法一 patch object
countStore.hobby.push('看书');
countStore.$patch({
hobby:countStore.hobby,
name:'qietujiang',
num:200
})
// 修改为(也就是只通过patch去修改非数组和对象类型的数据):
countStore.$patch({
name:'qietujiang',
num:200
})
此时,再去观察,watch和$subscribe,则可发现watch已经侦测不到数据的变动了,而$subscribe依然有效(在通过patch function方式修改时,两者都有效)。因此上,在需要捕获pinia的数据更新时,我们还是尽可能的去使用$subscribe方法来订阅更新。