Pinia修改State的四种方式
在Pinia中有四种方式可以修改state,这四种各有利弊,可以根据使用场景决定使用哪种方式修改
创建store:/stores/useState.js
import { reactive, ref } from 'vue'
import { defineStore } from 'pinia'
export const usePersonsStore = defineStore('per', ()=>{
const persons = reactive(['1'])
const name = ref("yq")
return {
per,
name
}
})
在App.vue中修改
-
可通过sotre直接修改
import { usePersonsStore } from '@/stores/useState'
const personStore = usePersonsStore()
personStore.name = 'yaoqi1'
-
优点:最简单直接的修改方法,代码少。
缺点:只能一次修改一个,不能修改多个。
-
可以通过storeToRefs转为ref后修改
import { storeToRefs } from 'pinia'
import { usePersonsStore } from '@/stores/useState'
// × 这样直接解构的话数据就会失去响应性,导致无法修改值,所以注意store不能直接解构
// const { persons, name } = personStore
// √ 如果要使用解构可以通过storeToRefs转为ref后再使用数据
const personStore = usePersonsStore()
const { per, name } = storeToRefs(personStore);
name.value = 'yaoqi2'
-
优点:可以解构store中的内容,代码也不多。
缺点:不能一次修改多个,而且还需要引入storeToRefs,比第一种方法多了一点代码。
-
可通过$patch传对象参数修改, 可同时修改多个数据
import { usePersonsStore } from '@/stores/useState'
const personStore = usePersonsStore()
personStore.$patch({
name: 'yaoqi3'
})
-
优点:可以一次性修改多个
缺点:不能直接修改原来的state,对state中的数组或对象不能增加或删除,只能创建新的对象进行赋值。
-
可通过$patch传函数参数修改, 可同时修改多个数据, 可对数组或对象使用添加/删除方法
import { usePersonsStore } from '@/stores/useState'
const personStore = usePersonsStore()
personStore.$patch( state => {
state.name = 'yaoqi4'
state.per.push({ name: 'Yaoqi' })
})
优点:可以一次修改多个,可以修改原来的state,对state中的数组或对象可以使用方法修改
缺点:代码繁琐,代码多。