不要在突变处理程序之外改变 vuex 存储状态 - Vuetify 小吃吧答案

【问题标题】：do not mutate vuex store state outside mutation handlers - Vuetify snackbar不要在突变处理程序之外改变 vuex 存储状态 - Vuetify 小吃吧
【发布时间】：2021-01-14 06:33:53
【问题描述】：

我有一个来自 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 的值，但我不知道如何解决这个问题。

【问题讨论】：

标签： vuex nuxt.js vuetify.js

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

【讨论】：