vuex 작업에서 bootstrap-vue 모달 및 토스트를 호출하는 방법은 무엇입니까?

vuex 작업에서 bootstrap-vue 모달 및 토스트를 호출하는 방법은 무엇입니까?

vuex와 함께 boostrap-vue를 사용해보신 분 있나요?나는 vuex 액션에서 모달과 건배사를 부르는데 어려움을 겪고 있다.

물론 사용할 수 없습니다.thisvuex 스토어에서 사용할 수 없습니다.

this.$bvModal.show('modalId');

나도 이렇게 모달한테 전화해봤어

import Vue from 'vue';

Vue.prototype.$bvModal.show('transaction');

그러나 콘솔에 다음과 같은 경고가 표시됩니다.

BootstrapVue 경고]:'$bvModal'은 Vue 인스턴스 'this' 컨텍스트에서 액세스해야 합니다.

vuex 액션에서 모델 및 건배사를 직접 호출할 수 있는 방법을 알고 계십니까?

전화 걸기this._vm.$bvModal.show('modalId');. 레퍼런스.

스토어에서 UI를 취급하지 않도록 하는 것이 좋다고 생각합니다.따라서 저장소 속성을 추가하고 구성 요소에서 변경 사항을 확인할 수 있습니다.

다음 예제에서는 어레이를 추가했습니다.toastMessages에서state재산과 aADD_TOAST_MESSAGEtoast Message를 추가합니다.그 후, 커밋할 수 있습니다.ADD_TOAST_MESSAGE다른 돌연변이 또는 작용으로 인한 돌연변이입니다.

최상위 컴포넌트 내부(App.vue） 。toastMessages상태 속성이 변경되고 마지막으로 푸시된 항목이 표시됩니다.

App.vue

<script>
export default {
  name: "App",
  created() {
    this.$store.watch(
      state => state.toastMessages,
      toastMessages => {
        this.$bvToast.toast(this.toastMessages.slice(-1)[0]);
      }
    );
  }
}
</script>

store.displaces를 설정합니다.

export default new Vuex.Store({
  state: {
    toastMessages: []
  },
  mutations: {
    ADD_TOAST_MESSAGE: (state, toastMessage) => (state.toastMessages = [...state.toastMessages, toastMessage]),
  },
  actions: {
    myActionThatDoSomething({commit}, params) {
      // Do something
      commit('ADD_TOAST_MESSAGE', "Something happened");
    }
  }
});

솔루션을 찾으려면 여기를 클릭해 주세요.https://github.com/vuejs/vuex/issues/1399#issuecomment-491553564

import App from './App.vue';

const myStore = new Vuex.Store({
    state: {
        ...
    },
    actions: {
        myAction(ctx, data) {
           // here you can use this.$app to access to your vue application
              this.$app.$root.$bvToast.toast("toast context", {
                 title: "toast!"
              });
        }
    }
});

const app = new Vue({
    el: '#my-div',
    render: h => h(App),
    store: myStore
});

myStore.$app = app; // <--- !!! this line adds $app to your store object

@eroak 아이디어를 사용하여 vue-sweetalert2에도 같은 것을 구현했습니다.

나는 또한 나의 Sweet Alert Toster에 대한 스토어를 만들었고, 그리고 나는 다음과 같은 시설을 보고 있다.ticks토스터 상태가 갱신될 때마다 갱신됩니다.사용하고 있다ticks제 주(州)에서는 메시지가 하나뿐입니다.ticks액션이 트리거되었을 때의 타임스탬프입니다.

데모 전문은, https://github.com/Uraharadono/CallbackFromVuexAction 를 참조해 주세요.

전화 걸어봐._vm.$root.$bvModal.show('modalId');

언급URL : https://stackoverflow.com/questions/57448027/how-to-call-bootstrap-vue-modals-and-toasts-from-vuex-actions