programing

Vuex 작업, vuex 모듈 및 사용자 지정 이름의 mapActions

itsource 2022. 7. 28. 22:50
반응형

Vuex 작업, vuex 모듈 및 사용자 지정 이름의 mapActions

모든 액션 이름을 입력하지 않고 템플릿 내에서 Vuex 액션을 사용할 수 있는 방법에 대해 고민하고 있습니다.이러한 코드는 다음과 같습니다.

export default new Vuex.Store({ modules: articles, auth, blabla})

my articles.my articles.getters에는 액션, getter 등이 포함되어 있습니다.액션의 1개는 다음과 같습니다.

[ArticleActions.remote.FETCH_ALL]({commit}) {something axios stuff}

true라는 이름으로 내보냅니다.

export const articles = {
namespaced: true,
state: initialState,
mutations,
actions,
getters
};

내 컴포넌트 기사 목록.vue 이 액션을 mapActions와 함께 사용합니다.

 methods: {
        ...mapActions('articles', [ArticleActions.remote.FETCH_ALL])
 }

이것은 동작합니다만, DocumentActions.remote 값은 사용하지 않습니다.FETCH_ALL을 템플릿에 포함시키고 싶은 것은 다음과 같습니다.

methods: {
        ...mapActions('articles', [{fetchAll: ArticleActions.remote.FETCH_ALL}])
 }

필요한 것은 다음과 같습니다.

mounted(){fetchAll();}

대신

mounted(){ArticleActions.remote.FETCH_ALL();}

할 수 있을까?

시간이 좀 지나자 스스로 깨달았어요. 사실, 그건 쉬웠어요...

...mapActions('articles', {
                fetchAll: ArticleActions.remote.FETCH_ALL,
            }
        ),

대체 구문에 익숙했기 때문에 그대로 두었습니다.

...mapGetters("articles", [
            'articles',
        ])

그래서 []만 사용하려고 했는데 해결 방법은 Objects를 사용하는 것입니다. 도움이 되길 바라며 죄송합니다.이렇게 하면 효과가 있습니다.

mounted(){this.fetchAll();}

언급URL : https://stackoverflow.com/questions/53318668/vuex-actions-vuex-modules-and-mapactions-with-custom-name

반응형