vue.js - 当vuex商店中的值更改时，如何更新组件中的状态？

在vuex商店中，我有此突变，它从一个组件接收味精，并在另一个组件上显示/隐藏提示消息(如成功登录后的You are logged in提示):

setPromptMsg: function (state, msg) {
    state.showPromptMsg = true;
    state.promptMsg = msg;
        function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
      }
     sleep(3000).then(() => {
          store.showPromptMsg = false;
          state.promptMsg = '';
          console.log('show message set to false');
      });
},

在compoenet中，我从商店收到showPromptMsg作为计算属性:

computed: {
    showPromptMsg () {
        return this.$store.state.showPromptMsg;
    },
    promptMsg () {
    return this.$store.state.promptMsg;
    }
}

模板中的显示/隐藏提示消息:

   <div v-show="showPromptMsg">
      <div class="text-center" >
         <strong> {{promptMsg}} </strong>
      </div>
  </div>

问题是当提示超时时，即在商店将showPromptMsg设置为false时，更改不会反射(reflect)到组件中，因此通知框不会消失。

我想知道解决这个问题的惯用方式是什么？

最佳答案

代码正在设置

store.showPromptMsg = false;

我希望你想要

state.showPromptMsg = false;