nuxt 레이아웃 내에서 메서드를 실행하기 위한 vuex 상태 변경 감지

nuxt 레이아웃 내에서 메서드를 실행하기 위한 vuex 상태 변경 감지

페이지 또는 vue 컴포넌트 내에서 폼 제출을 완료하면 스낵바 알림을 표시하려고 합니다.vuex 스토어를 사용하여 경고 유형 및 메시지를 관리합니다.

my-nuxt-app/store/my-nuxt.params

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', {});
    }
};

그리고 어플리케이션에서 글로벌하게 getter에 접속하기 위한 nuxt 플러그인을 만들었습니다.

my-nuxt-app/plugins/my-nuxt.params

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컴포넌트 제출방법, 아래와 같이 제 경고정보를 발송합니다.

my-nuxt-app/컴포넌트/폼/계정폼.표시하다

...

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페이지와 페이지 디렉토리 내의 대부분의 페이지를 공통 레이아웃으로 사용합니다.그래서 스낵바 컴포넌트를 추가했습니다.dashboard레이아웃을 지정하여 필요할 때마다 경보 메시지를 표시합니다.

my-nuxt-app/my-nuxt-app/my-nux표시하다

<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따라서.

아마 당신이 체크하는 방법일 겁니다hasAlert

당신의.clearAlert빈 오브젝트를 전달합니다.setAlert이 빈 객체의 속성을 할당하려고 합니다.hasAlert빈 문자열인지 확인하고 있습니다.

clearAlert를 다음으로 변경하는 경우:

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

그러면 문제가 해결될 거예요.

언급URL : https://stackoverflow.com/questions/61773812/detect-vuex-state-change-to-execute-a-method-inside-a-nuxt-layout