1、访问state
Pinia中的state存储了核心状态,是响应式的,可直接访问。
// 定义一个store
const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
})
})
// 使用store
const counter = useCounterStore()
// 访问state
console.log(counter.count) // 输出: 0
2、state的更改
可直接更改
// 增加count的值
counter.count++
3、state的批量修改——$patch
(1)可通过$patch传对象参数修改, 可同时修改多个数据
优点:可以一次性修改多个
缺点:不能直接修改原来的state,对state中的数组或对象不能增加或删除,只能创建新的对象进行赋值。
import { usePersonsStore } from '@/stores/useState'
const personStore = usePersonsStore()
personStore.$patch({
name: 'yaoqi3'
})
(2) 可通过$patch传函数参数修改, 可同时修改多个数据, 可对数组或对象使用添加/删除方法
优点:可以一次修改多个,可以修改原来的state,对state中的数组或对象可以使用方法修改
缺点:代码繁琐,代码多。
import { usePersonsStore } from '@/stores/useState'
const personStore = usePersonsStore()
personStore.$patch( state => {
state.name = 'yaoqi4'
state.persons.push({ name: 'Yaoqi' })
})
4、state的整体替换
// 替换整个state
counter.$state = { count: 0, name: 'Pinia' }
5、state的重置
使用$state()重置state回到初始状态
// 重置state
counter.$reset()
如果本文章对你有帮助,那就点个关注吧!