Vue 3 Pinia状态不更新：修改后状态未同步至DevTools

以下是我的Pinia Store代码：

import {
    defineStore
} from 'pinia'

export const useMessageActionsStore = defineStore({
    id: 'messageActions',
    state: () => ({
        reply: [],
        message_sent: false,
        hiddenVaultSetup: false,

    }),

 actions: { 

            async hideMessage(messageId) {
            await axios
                .post(`/api/message/${messageId}/hide`)
                .then((response) => {})
                .catch((error) => {
                    // console.log(error);
                    // console.log(error.response.status);
                    // if (error.response.status == 403) {
                    console.log('hiddenValueSetup:', this.hiddenVaultSetup);
                    this.hiddenVaultSetup = true;
                    console.log('hiddenValueSetup:', this.hiddenVaultSetup);
                    // }
                })
        }    }
})

执行catch逻辑时，首次日志输出hiddenValueSetup: false，执行this.hiddenVaultSetup = true;后日志输出hiddenValueSetup: true，但状态hiddenVaultSetup实际仍为false，Vue DevTools中也未更新，请问问题原因是什么？

问题原因及解决方案 #

问题核心是**.catch回调函数内的this指向偏离了Pinia Store实例**。在async/await结合.then/.catch的写法里，回调函数会创建独立的上下文，此时this不再指向Store，你修改的只是回调内部的局部变量，自然不会同步到实际的Store状态中。

有两种可行的解决方式：

1. 改用try/catch替代链式调用，确保this始终指向Store实例：

async hideMessage(messageId) {
  try {
    await axios.post(`/api/message/${messageId}/hide`)
  } catch (error) {
    console.log('hiddenValueSetup:', this.hiddenVaultSetup);
    this.hiddenVaultSetup = true;
    console.log('hiddenValueSetup:', this.hiddenVaultSetup);
  }
}

2. 若要保留链式调用，提前将Store实例赋值给变量，在回调中使用该变量修改状态：

async hideMessage(messageId) {
  const store = this;
  await axios
    .post(`/api/message/${messageId}/hide`)
    .then((response) => {})
    .catch((error) => {
      console.log('hiddenValueSetup:', store.hiddenVaultSetup);
      store.hiddenVaultSetup = true;
      console.log('hiddenValueSetup:', store.hiddenVaultSetup);
    })
}

内容的提问来源于stack exchange，提问作者user3714932