vuex에서 모듈의 네임스페이스란 정확히 무엇입니까?

vuex에서 모듈의 네임스페이스란 정확히 무엇입니까?

나는 최근에 로 시작했다.vuex.

관계자는 모듈이 무엇인지 잘 설명해주지만 모듈의 네임스페이스를 제대로 이해했는지 모르겠습니다.

누가 더 나은 방법으로 네임스페이스에 불을 붙여줄 수 있나요?언제, 왜 사용합니까?

대단히 감사합니다.

매우 큰 상태의 오브젝트가 있는 큰 앱을 가지고 있는 경우, 당신은 종종 그것을 모듈로 나눕니다.

그 말은 기본적으로 주를 잘게 쪼개야 한다는 뜻이죠주의사항 중 하나는 모듈이 동일한 상태로 통합되어 있기 때문에 모듈에 대해 동일한 방식 이름을 사용할 수 없다는 것입니다.다음은 예를 제시하겠습니다.

moduleA {
  actions:{
    save(){}
  }
}

moduleB {
  actions:{
    //this will throw an error that you have the same action defined twice
    save(){}
  }
}

따라서 이 기능을 활성화하려면 모듈을 네임스레이드로 정의할 수 있습니다.그 후 다른 모듈에서 동일한 방법을 사용할 수 있습니다.

moduleA {
  actions:{
    save(){}
  },
  namespaced: true
}

moduleB {
  actions:{  
    save(){}
  },
  namespaced: true
}

그리고 이렇게 부르죠.

this.$store.dispatch('moduleA/save')
this.$store.dispatch('moduleB/save')

사용하시는 경우 조금 복잡해질 수 있으니 주의하시기 바랍니다.mapGetter또는mapActions이제 겟터(getters)의 형태로 되어 있기 때문에['moduleA/client']

그러니 꼭 필요할 때만 사용하세요.

이를 사용하려면 모듈 이름 공간 문자열을 첫 번째 인수로 도우미에 전달하여 모든 바인딩이 해당 모듈을 컨텍스트로 사용하도록 할 수 있습니다.위의 내용은 다음과 같이 단순화할 수 있습니다.

...mapGetter('moduleA/client', {
    a: state => state.a
});

기본적으로 Vuex는 모든 getter와 작업을 글로벌 네임스페이스에 등록합니다.Vuex 모듈이 대량으로 증가함에 따라 글로벌 Vuex 네임스페이스가 충돌하게 됩니다.이 문제를 해결하기 위해 네임스페이스 접근법이 등장합니다.namesched 모듈은 글로벌 이름 공간에 등록되지 않습니다.대신 특정 모듈에서 사용할 수 있습니다.namespace.

2개의 모듈 제품과 카트가 있는 예를 생각해 봅시다.

//products module
export default {
    namespaced: true,
    state: {
        products: []
    },
    getters: {
        products(state){
            return state.products
        }
    },
    actions: {
        async load(context, params){ ... }
    },
    mutations: {
        products(state, data){ ... }
    }
}

또 다른 모듈에는 유사한 게터 및 액션이 있습니다.

//cart module
export default {
    namespaced: true,
    state: {
        products: [],
        cart: []
    },
    getters: {
        products(state){ return state.products }
        cart(state){ return state.cart}
    },
    actions: {
        async load(context, params){ ... },
        async set(context, params){ ... },
    },
    mutations: {
        products(state, data){ ... },
        cart(state, data){ ... }
    }
}

둘다요.products그리고.cart모듈에는 게터 제품과 액션 부하가 공통으로 있습니다.이러한 모듈을 네임스페이스 없이 사용하면 문제가 발생합니다.여기서 만들기namespaced: true이러한 상황을 회복하는 데 도움이 됩니다.

네임스페이스를 사용하여 getters를 매핑할 수 있습니다....mapGetters(['products/products'])에 대해서도 마찬가지입니다.mapActions너무.

저는 vue.js에 대한 전문가는 아니지만 문서 이름 공간을 사용하여 모듈의 getters/actions/mutation에 대한 경로 액세스를 변경할 수 있습니다.

디폴트namespaced: false모든 getter, 액션, 돌연변이를 다른 모듈에서 글로벌하게 사용할 수 있으므로 다른 모듈에서 동일한 getter/action/module을 사용하려면 플래그를 지정해야 합니다.namespaced: true그렇지 않으면 오류가 발생합니다.

또 다른 용도는 getters/actions/metation을 다른 경로(모듈이 등록되어 있는 경로)로 구성하는 것입니다.이는 getter/action/mutation이 정의된 위치를 바로 알 수 있기 때문에 대규모 프로젝트에서 매우 유용합니다.

언급URL : https://stackoverflow.com/questions/47792212/what-exactly-is-namespacing-of-modules-in-vuex