Pinia修改State的四种方式

Pinia修改State的四种方式

在Pinia中有四种方式可以修改state，这四种各有利弊，可以根据使用场景决定使用哪种方式修改

创建store：/stores/useState.js

import { reactive, ref } from 'vue'
import { defineStore } from 'pinia'

export const usePersonsStore = defineStore('persons', ()=>{
  const persons = reactive(['1'])
  const name = ref("yq")
  
  return {
    persons,
    name
  }
}) 

在App.vue中修改

1. 可通过sotre直接修改

   import { usePersonsStore } from '@/stores/useState'
   
   const personStore = usePersonsStore()
   
   personStore.name = 'yaoqi1'
   

   优点：最简单直接的修改方法，代码少。

   缺点：只能一次修改一个，不能修改多个。

2. 可以通过storeToRefs转为ref后修改

   import { storeToRefs } from 'pinia'
   import { usePersonsStore } from '@/stores/useState'
   
   // × 这样直接解构的话数据就会失去响应性,导致无法修改值，所以注意store不能直接解构
   // const { persons, name } = personStore
   // √ 如果要使用解构可以通过storeToRefs转为ref后再使用数据
   const personStore = usePersonsStore()
   const { persons, name } = storeToRefs(personStore);
   
   name.value = 'yaoqi2'
   

   优点：可以解构store中的内容，代码也不多。

   缺点：不能一次修改多个，而且还需要引入storeToRefs，比第一种方法多了一点代码。

3. 可通过$patch传对象参数修改, 可同时修改多个数据

   import { usePersonsStore } from '@/stores/useState'
   
   const personStore = usePersonsStore()
   
   personStore.$patch({  
     name: 'yaoqi3'
   })
   

   优点：可以一次性修改多个

   缺点：不能直接修改原来的state，对state中的数组或对象不能增加或删除，只能创建新的对象进行赋值。

4. 可通过$patch传函数参数修改, 可同时修改多个数据, 可对数组或对象使用添加/删除方法

   import { usePersonsStore } from '@/stores/useState'
   
   const personStore = usePersonsStore()
   
   personStore.$patch( state => {
     state.name = 'yaoqi4'
     state.persons.push({ name: 'Yaoqi' })
   })
   

   优点：可以一次修改多个，可以修改原来的state，对state中的数组或对象可以使用方法修改

   缺点：代码繁琐，代码多。