vuex에서 vue 인스턴스를 사용하는 더 나은 방법

vuex에서 vue 인스턴스를 사용하는 더 나은 방법

이제 막 vuex를 사용하기 시작했는데 vuex에서 vue 인스턴스를 사용해야 했습니다.vue-toasted라는 패키지를 사용하여 vue 어플리케이션 내에서 사용하다가 main.js에 다음 코드를 썼습니다.

import Toasted from 'vue-toasted';

const ToastedOptions = {
  position: 'bottom-center',
  duration: 1500,
  theme: 'bubble'
};

Vue.use(Toasted, ToastedOptions);

.vue 파일에서는 정상적으로 동작했지만 store.js에서는 동작하지 않았습니다.

그 후 store.js 내부에서도 같은 코드를 선언하려고 했습니다만, 이것도 동작하지 않았습니다.vue 인스턴스에 액세스해야 했기 때문에 몇 가지 솔루션을 생각해냈습니다.

1. vue 인스턴스를 작업에 페이로드로 전달
2. 이를 통해 vue 인스턴스에 직접 액세스합니다._vm

두 패턴 모두 완벽하게 작동했지만, 분명 더 나은 방법이 있을 거예요. 깨끗한 코드를 위한 더 깨끗한 접근법이요.

Vuex는 상태 관리 시스템으로, DOM을 조작하지 않고 상태(데이터, 직원, 자동차, 애플리케이션 상태, 사용자 세부 정보 등)를 저장하는 것이 목표입니다.이게 네가 가진 이유야.

보시다시피 이 문제에 대처하는 방법은 매우 많지만, 이 문제를 해결하는 가장 일반적인 방법은 Vue에게 "이벤트"를 일으키는 것이라고 생각합니다.

예를 들어 다음과 같은 상태가 됩니다.toast

const state = {
  toast: null,
  cars: [{...}, {...}, {...}]
}

그런 다음 토스트를 만들 때 주(州)에서 토스트를 커밋(변환)하여 실제 토스트의 메타데이터를 포함할 수 있습니다.

const state = {
  toast: {
    title: 'An important message',
    options: {
      position: 'bottom-center',
      duration: 1500,
      theme: 'bubble'
    }
  },
  cars: [{...}, {...}, {...}]
}

예를 들어 vue에서는 vuex 토스트 상태의 감시자가 변경 사항을 대기하도록 할 수 있습니다.일단은state.toast로부터의 변경null객체에 대해 실제 토스트를 트리거하는 기능을 실행할 수 있습니다(vue 단위). 그런 다음 토스트가 완료되면 토스트 객체를 상태에서 지울 수 있습니다(더 이상 토스트가 없음을 알립니다).

유사 예제 vue 파일:

import { mapState } from 'vuex';
new Vue({
  computed: {
    ...mapState({
      toast: state => state.toast
    })
  },
  watch: {
    toast(toastData) {
      if (toastData === null) {
        return;
      }
      
      this.toastMessage(toastData);
    }
  },
  methods: {
    toastMessage(toastData) {
      this.toasted.show(toastData.title, toastData.options);
      window.setTimeout(this.resetToast, toastData.options.duration)
    },
    resetToast() {
      this.$store.commit('CLEAR_TOAST'); // mutation in vuex to set state.toast = null
    }
  }
})

언급URL : https://stackoverflow.com/questions/63711139/better-way-of-using-vue-instance-in-vuex