当 vuex 外没有 mutation 发生时报错 "Vuex do not mutate vuex store state outside mutation handlers"

Question

我在 Vuex 中定义了一个 mutation，如下所示：

setError(state, error) {
    state.error = error
    setTimeout(() => {
      state.error = null
    }, 5000)
  },

我这样称呼它：

...
catch (error) {
          this.$store.commit('setError', error.response.data.error.message)
        }
...

当超时期限到期时，我得到一个错误：[vuex] do not mutate vuex store state outside mutation handlers.我不明白，因为我没有在 Vuex 之外改变任何东西。

谁能建议如何解决这个问题？

我可以通过将 setError 简化为仅分配错误并删除 setTimeout 部分来解决此问题，但我必须在其他地方这样做：

flashError(message) {
      this.$store.commit('setError', message)
      setTimeout(() => {
        this.$store.commit('setError', null)
      }, 5000)
    },

这个解决方案似乎不是最优的，因为我希望能够在任何地方临时设置这个错误

非常感谢

Answer 1

根据我们的评论交流，我创建了一个示例组件来演示如何在不涉及 Vuex 的情况下自动关闭 flash 错误。

<template>
  <div class="flash-error-auto-close">
    <h4>Flash Error with Auto Close</h4>
    <div class="row">
      <div class="col-md-6">
        <button class="btn btn-secondary" @click="triggerTimedErrorDisplay">Show Flash Error</button>
        <div id="flash-error" v-if="displayError" class="alert alert-danger" role="alert">
          {{ errorMessage }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        errorMessage: 'This is the error message',
        displayError: false,
        displayTime: 5000
      }
    },
    methods: {
      triggerTimedErrorDisplay() {
        this.displayError = true;

        setTimeout( () => {
          this.displayError = false;
        }, this.displayTime);
      }
    }
  }
</script>

<style scoped>
  #flash-error {
    margin-top: 0.5rem;
  }
</style>

当 vuex 外没有 mutation 发生时报错 "Vuex do not mutate vuex store state outside mutation handlers"

Error "Vuex do not mutate vuex store state outside mutation handlers" when no mutation outside vuex occurs

vue.js

vuex