vuex 작업에서 $root 인스턴스 액세스

vuex 작업에서 $root 인스턴스 액세스

Loader 컴포넌트가 있으며, 이 컴포넌트에서 Loader 컴포넌트가 실행된다.

created() {
    this.$root.$on('show-loading', (vars) => {
        this.loading = vars;
        console.log('loader executed');
    });
},

현재 vue 컴포넌트에서 실행할 수 있습니다.show-loading통해.this.$root.$emit('show-loading', true);.

하지만 지금 vuex 모듈 파일에서 코드를 실행하려고 합니다.에러가 나다

TypeError: "_this.$root가 정의되지 않았습니다."

vuex에서 루트 인스턴스에 액세스하는 올바른 방법을 아는 사람?

Vuex 스토어에 이벤트 핸들러를 배치하지 마십시오.그들은 거기에 속하지 않고, 결코 기대했던 대로 작동하지 않을 것이다.저장소에는 getter(저장소에서 값을 가져오는 방법), 돌연변이(동기 설정기), 동작(비동기 설정기) 및 상태(데이터)가 있습니다.

리스너는 컴포넌트와 같은 Vue 인스턴스에 속합니다.그것 말고도, 나는 또한 피하라고 제안하고 싶다.this.$root그리고.this.$parent전염병처럼요코드에 이러한 컴포넌트가 포함되어 있는 것은 일반적으로 컴포넌트가 실제 컴포넌트 파일 외부에서 변경되고 있음을 나타냅니다.이것에 의해, 변경이 예상외의 장소에서 변경이 발생하는 마법의 동작이 발생합니다.

당신의 경우, 하나의 스토어 돌연변이 또는 액션으로 당신이 원하는 것을 훨씬 더 쉽게 할 수 있습니다.

스토어에서 돌연변이를 생성합니다.

const mutations = {
  showLoading(state, data) {
    state.loading = data;
  }
};

이제 컴포넌트에서는this.$store.commit('showLoading', true);이벤트 버스는 필요 없습니다.루트 구성 요소에 마법처럼 나타나는 이벤트가 없습니다.동기식 셋터 하나면 돼

---

글로벌 이벤트 처리가 필요한 경우 버스를 대신 사용할 수 있습니다.

const $bus = new Vue();

Vue.prototype.$bus = $bus;

컴포넌트에서 이벤트를 청취할 수 있습니다.this.$bus.$on(...)또는 이벤트를 내보냅니다.this.$bus.$emit(...)Vue 이외의 작업을 완전히 수행해야 하는 경우 다음 패턴을 사용하여 컴포넌트 외부에 이벤트청취자를 만들 수 있습니다.

$bus.$on('show-loading', (vars) => {
    // Do something
});

엄밀히 말하면 스토어에 로딩할 수 있습니다.import store from '../path/to/store'그리고.store.commit(...).

언급URL : https://stackoverflow.com/questions/62717331/access-root-instance-from-vuex-actions