检测vuex状态变化，在nuxt布局中执行一个方法。

Question

我试图在页面或vue组件中显示vuetify snackbar警报，一旦我完成了表单提交。我使用vuex store来管理警报类型和消息。

我的nuxt-appstorealerts.js。

export const state = () => ({
    message: '',
    type: ''
});

export const getters = {

    hasAlert(state) {
        return state.message !== '';
    },

    alertMessage(state) {
        return state.message;
    },

    alertType(state) {
        return state.type;
    }
};

export const mutations = {

    SET_ALERT(state, payload) {
        state.type = payload.type;
        state.message = payload.message;
    }
};

export const actions = {

    setAlert({commit}, payload) {
        commit('SET_ALERT', payload);
    },
    clearAlert({commit}) {
        commit('SET_ALERT', {});
    }
};

我还创建了一个nuxt插件来在我的应用程序中全局访问getters。

我的-nuxt-apppluginsalert.js

import Vue from 'vue';
import {mapGetters} from 'vuex';

const Alert = {
    install(Vue, options) {
        Vue.mixin({
            computed: {
                ...mapGetters({
                    hasAlert: 'alerts/hasAlert',
                    alertType: 'alerts/alertType',
                    alertMessage: 'alerts/alertMessage'
                })
            }
        });
    }
};

Vue.use(Alert);

在我的 AccountForm 组件提交方法，我将我的警报信息派遣到存储中，如下所示。

我的下一个应用组件表单AccountForm.vue。

...

methods: {
    async submit () {
        try {
            await this.$axios.patch("/settings/profile", this.form);
            this.$store.dispatch('alerts/setAlert', {
                type: 'success',
                message: 'You have successfully updated your information.'
            });
        } catch (e) {
        }
    }
},
...
}
...

而这个 AccountForm.vue 组件是 profile.vue 的页面，这显然是在 页夹 我的项目。而且我还扩展了 dashboard.vue 为此 profile.vue 和我的页面目录下的大部分页面作为一个共同的布局。因此，我把 snackbar 组件添加到了 dashboard 布局，以便在需要的时候显示警报信息。

我的下一个应用布局dashboard.vue。

<template>
  ...

     <v-snackbar
            :timeout="snackbar.timeout"
            :color="snackbar.color"
            :top="snackbar.y === 'top'"
            :bottom="snackbar.y === 'bottom'"
            :right="snackbar.x === 'right'"
            :left="snackbar.x === 'left'"
            :multi-line="snackbar.mode === 'multi-line'"
            :vertical="snackbar.mode === 'vertical'"
            v-model="snackbar.show"
    >
      {{ snackbar.text }}
      <v-btn flat icon dark @click.native="snackbar.show = false">
        <v-icon>close</v-icon>
      </v-btn>
    </v-snackbar>

  ...
</template>

<script>

  ...

  data: () => ({
        snackbar: {
            show: false,
            y: 'top',
            x: null,
            mode: '',
            timeout: 6000,
            color: '',
            text: ''
        },
    }),
  computed: {
        availableAlert: function () {
            return this.hasAlert;
        }
    },
    watch: {
        availableAlert: function(alert) {
            if(alert) {
                this.showAlert(this.alertType, this.alertMessage);
                this.$store.dispatch('alerts/clearAlert');
            }
        }
    },
    methods: {
        showAlert(type, message) {
            this.snackbar.show = true;
            this.snackbar.color = type;
            this.snackbar.text = message;
        }
    }

</script>

我在第一次提交表格时收到了警报信息，之后我必须重新加载页面，然后提交才能收到警报。请告诉我一个检测vuex状态变化并触发的方法。showAlert 的方法。dashboard.vue 相应地，我想在页面或vue组件内完成表单提交后，显示vuetify的小吃条提醒。

Answer 1

这很可能是你检查的方式。hasAlert

您的 clearAlert 传递一个空对象，你的 setAlert 正在试图为那个空对象分配属性，而你的 hasAlert 正在检查它是否是一个空字符串。

如果你把clearAlert改为:

clearAlert({commit}) {
    commit('SET_ALERT', { message: '', type: '' });
}

就能解决这个问题