当 vuex 外部没有突变发生时，错误“Vuex 不会在突变处理程序之外改变 vuex 存储状态”答案

【问题标题】：Error "Vuex do not mutate vuex store state outside mutation handlers" when no mutation outside vuex occurs当 vuex 外部没有突变发生时，错误“Vuex 不会在突变处理程序之外改变 vuex 存储状态”
【发布时间】：2021-07-05 08:43:24
【问题描述】：

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

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)
    },

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

非常感谢

【问题讨论】：

这可能有助于解释为什么您将 state.error 设置为错误，然后调用 setTimeout 将其设置为 null。从表面上看，对我来说没有意义。无论如何，setTimeout 是异步的，因此您需要在操作中调用它，而不是在突变中调用它。
好问题，我是初学者，所以也许这不是一个好主意。我想显示一个 flash 错误消息，现在我已经设置好了，如果错误不为 null，则会显示一个 div，否则它将被隐藏。我不想让错误消息浮动，我希望它自动清除

标签： vue.js vuex

【解决方案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>

【讨论】：