Vuex 클래스: Vue 구성 요소 외부의 Vuex 액세스

Vuex 클래스: Vue 구성 요소 외부의 Vuex 액세스

Vuex 클래스를 사용하는 Vue 구성 요소 외부에서 Vuex에 액세스하려면 어떻게 해야 하는가?

정상적인 상황에서는 매우 간단하다.

// some JS file
import store from './../store'; // path to Vuex store

store.commit('ux/mutationName', somePayload)

하지만 나는 Vuex 클래스를 사용하고 있고 Vuex 모듈을 가지고 있다.

import { Module } from 'vuex';
import { RootState } from '@/types/vuex/types';
import { MutationTree } from 'vuex';
import { GetterTree } from 'vuex';

const namespaced: boolean = true;

export interface UXState {
  compLoading: boolean;
}

export const state: UXState = {
  compLoading: false
};

export const mutations: MutationTree<UXState> = {
  setCompLoading(state, payload: boolean): void {
    state.compLoading = payload;
  }
};

export const getters: GetterTree<UXState, RootState> = {
  compLoading(state): boolean {
    return state.compLoading;
  }
};

export const ux: Module<UXState, RootState> = {
  namespaced,
  state,
  mutations,
  getters
};

Form Vue 구성 요소 나는 다음과 같은 방법으로 돌연변이를 저장할 수 있다.

<script lang="ts">
  import axios from 'axios';
  import {Component, Vue} from 'vue-property-decorator';
  import {Mutation} from "vuex-class";
  const namespace: string = "ux";

  @Component({
    name: 'CompName'
  })
  export default class AppNavigationBar extends Vue {

    @Mutation('setCompLoading', { namespace })
    setCompLoading!: (flag: boolean) => void;

    async created() {
      this.setCompLoading(true);
      const resp = await axios.get('someURL');
      this.setCompLoading(false);
    }
  }
</script>

Vue 구성 요소 외부에 TS가 있는 Vuex 클래스를 사용하여 Mutiation에 액세스하려면 어떻게 해야 하는가?

vuex 클래스를 사용하더라도 이전 방식대로 돌연변이를 사용할 수 있다.

import store from './../store';

store.commit('module/mutationName', payload);

또는 입력된 돌연변이를 직접 사용하려는 경우:

import state from './../store/state';
import { MUTATION_NAME } from  './../store/mutations'; // Or wherever you have them

MUTATION_NAME(state, payload);

참조URL: https://stackoverflow.com/questions/59784122/vuex-class-accessing-vuex-outside-of-a-vue-component