Pinia——修改state状态

有三种方式：直接修改、批量修改、通过action进行修改

直接修改（不推荐）

尽管 Pinia 允许你直接修改 store 中的 state（因为它是响应式的），但这种方式并不推荐，因为它绕过了 Pinia 提供的变更追踪和调试功能。不过，如果你确实需要这样做，可以直接访问 store 的 state 并修改它：

userStore.name = 'Jane Doe';

使用 Actions

为了保持代码的清晰和可维护性，以及利用 Pinia 的所有功能，推荐在 actions 中封装修改 state 的逻辑。Actions 可以是异步的，并且可以访问 store 的完整上下文，包括 state、getters 和其他 actions。

import { defineStore } from 'pinia'  
  
export const useUserStore = defineStore('user', {  
  state: () => ({  
    name: 'John Doe',  
    age: 30  
  }),  
  actions: {  
    // 封装修改 name 的逻辑  
    updateName(newName) {  
      this.name = newName; // 或者使用 this.$state.name = newName; 但通常直接访问 this.xxx 更常见  
    },  
    // 也可以进行更复杂的逻辑处理，比如调用 API  
    async fetchUserData() {  
      // 假设这是从 API 获取的用户数据  
      const userData = await fetchUserDataFromAPI();  
      this.name = userData.name;  
      this.age = userData.age;  
    }  
  }  
})

批量更新 State

如果你需要同时更新多个 state 属性，可以使用 Pinia 提供的 $patch 方法。这个方法接受一个对象或一个函数，并用于更新 state。使用对象时，它将对象的属性合并到 state 中；使用函数时，它将 state 作为参数传递，并允许你返回一个新的 state 对象或使用 this 关键字直接修改它。

// 使用对象  
userStore.$patch({  
  name: 'Jane Doe',  
  age: 31  
});  
  
// 使用函数  
userStore.$patch(state => {  
  state.name = 'Jane Doe';  
  state.age = 31;  
});