SPA VueJS에서 mapState 및 mapUtions를 전체적으로 선언

SPA VueJS에서 mapState 및 mapUtions를 전체적으로 선언

기본 SPA를 만들고 있지만 Vuex와 함께 관리하는 상태와 위의 돌연변이는 모두 정상이지만 mapState와 mapMutions를 사용하려는 각 구성 요소에서는 로컬로 가져와야 한다.

<script>
    import {mapState,mapMutations  } from 'vuex';
    export default{
        computed : mapState(['isLoggedIn']),
        methods: {
            ...mapMutations(['logout'])
        }
    }
</script>

이렇게 하는 게 맞나?아니면 어떻게 하면 글로벌하게 신고하고 각 구성 요소에서 다음과 같이 수입을 피할 수 있을까?

<script>   

    export default{
        computed : mapState(['isLoggedIn']),
        methods: {
            ...mapMutations(['logout'])
        }
    }
</script>

빠른 솔루션

Vuex 도우미들은 다음과 같이 한다.mapMutations다음과 같이 가정하는 함수로 채워진 객체를 반환한다.this.$storeVuex 상점이다.

스토어 서비스

바닐라 JS에서 스토어를 사용해야 하는데 스토어 모듈을 어디에나 노출시키지 않으려면 서비스 모듈을 정의하면 된다.

import { mapActions } from 'vuex';
import $store from '@/store';

/**
 * Simple mapping of the Vuex store UI module.
 * @module services/ui
 * @property {Function} pushMessage
 */
export default Object.assign({
    $store,
}, mapActions('ui', ['pushMessage']));

이제, 그것을 사용하는 것은 서비스 모듈을 가져오는 것만큼 간단하다.

import ui from './services/ui';

// triggers the `pushAction` on the ui namespaced store module
ui.pushMessage({ content: 'whatever' });

부에 믹신

Vue 구성 요소에서 기본 계산 및 메서드를 사용하려면 특정 구성 요소로 가져올 단순 혼합물을 생성하십시오.

import { mapState, mapMutations } from 'vuex';

export default {
    computed : mapState(['isLoggedIn']),
    methods: mapMutations(['logout'])
}

그런 다음 구성 요소에 혼합물을 사용하십시오.

<script>
import mixin from './mixin';

export default {
  mixins: [mixin],
  data() {/* ... */},
  // etc.
}
</script>

글로벌 믹싱

각 구성 요소에 이 기본 혼합물을 명시적으로 정의하지 않고 사용할 수 있도록 하려면 글로벌 혼합물을 사용하십시오.

import Vue from 'vue';
import { mapState, mapMutations } from 'vuex';

export const mixin = {
    computed : mapState(['isLoggedIn']),
    methods: mapMutations(['logout'])
};

Vue.mixin(mixin);

---

개인적으로, 표준으로, 나는 절대로 주나 돌연변이를 지도하지 않는다.

구성 요소가 상태 구조를 알 필요가 없고 작업이 비동기인지 아닌지 알 수 있도록 Getter와 작업만 매핑한다.나는 게이터와 액션을 Vuex 스토어(또는 Redex와 같은 유사한 스토어)의 공용 API로 본다.

나는 또한 관련 자료만 지도한다.컴포넌트 책임은 앱 사용자와의 상호 작용, 이벤트 표시 및 처리, 그리고 그 이상 아무것도 하지 않는 것이다.모든 구성 요소가 필요한 경우user목적어, 어쩌면 그들이 너무 많은 것을 하고 있을 수도 있고, 그 논리는 아마도 행동에서처럼 다른 곳으로 옮겨져야 할 것이다.

Vue 통신에 대한 자세한 정보

참조URL: https://stackoverflow.com/questions/49741130/declare-mapstate-and-mapmutations-globally-in-spa-vuejs