Question

我有一个来自Vuetify的小吃店。它在default.vue中，并且vuex存储区控制v-model，message和color：

DefaultSnackBar.vue

<template>
  <v-container>
    <v-snackbar
      v-model="snackbarProperties.show"
      :color="snackbarProperties.color"
      timeout="7000"
      multi-line
    >
      {{ snackbarProperties.message }}

      <template v-slot:action="{ attrs }">
        <v-btn
          text
          v-bind="attrs"
          @click="hideSnackbar"
        >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
export default {
  methods :{
    ...mapActions("Snackbar",["showSnackbar","hideSnackbar"]),
  },
  computed: {
      ...mapGetters("Snackbar",["snackbarProperties"])
  },
}
</script>

Snackbar.js

export const state = () => ({
    message: "",
    color: "",
    show: false,
});

export const getters = {
    snackbarProperties: state => {
      return state;
    },
  
  }

export const mutations = {
    showSnackbar: (state, payload) => {
        state.message = payload.message;
        state.color = payload.color;
        state.show = true;
    },
    hideSnackbar: (state) => {
        state.message = "";
        state.color = ""
        state.show = false;
    },
}

export const actions = {
    showSnackbar({ commit }, payload) {
        commit('showSnackbar', payload)
    },
    hideSnackbar({ commit }) {
        commit('hideSnackbar')
    }
}

当我致电showSnackbar({...})时，该栏会正确显示，没有任何错误，但是当消失（达到超时）时，就会出现此错误，并且一切都会崩溃

请勿在变异处理程序之外变异vuex存储状态

我认为这是因为当条消失时，组件会更改其附加的v-model的值，但是我不确定如何解决此问题。

Answer 1

我从这个vue forum找到了答案：

使用其中包含setTimeout代码的操作。然后在超时进行突变。突变应该是同步的，这就是为什么在其中使用超时会发出警告。

我更新了Snackbar.js使其适合：

export const state = () => ({
    message: "",
    color: "",
    show: false,
});

export const getters = {
    snackbarProperties: state => {
      return state;
    },
  
  }

export const mutations = {
    showSnackbar: (state, payload) => {
        state.message = payload.message;
        state.color = payload.color;
        state.show = true;


    },
    hideSnackbar: (state) => {
        state.message = "";
        state.color = ""
        state.show = false;
    },
}

export const actions = {
    showSnackbar({ commit }, payload) {
        commit('showSnackbar', payload)
        setTimeout(() => {
          commit('hideSnackbar')
        }, 500);
    },
    hideSnackbar({ commit }) {
        commit('hideSnackbar')
    }
}

不要在变异处理程序之外变异vuex存储状态-Vuetify快餐栏

1 个答案: