时间戳

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

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

问题描述

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

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

非常感谢

标签： vue.jsvuex

解决方案

基于我们的评论交流，我创建了一个示例组件来演示如何在不涉及 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>

推荐阅读