Pinia的state状态管理方法

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()

 如果本文章对你有帮助，那就点个关注吧！