vuex 네스트된 모듈을 사용하는 방법

vuex 네스트된 모듈을 사용하는 방법

Vuex 문서에서 설명한 바와 같이 프로젝트가 성장하기 시작하면 자체 억제 및 모듈화된 확장 가능한 솔루션으로 상태 관리를 분리할 수 있는 방법이 필요합니다.여기 네임스페이스가 도움이 됩니다.안타깝게도 Vuex 모듈 섹션은 정보를 제공하지 않고 이를 효과적으로 사용하는 예를 제시하지 않습니다.

이것은 나의 스토어 구조입니다.

store
 |- modules
   |- core
     |- country.js
     |- region.js
     |- ...
   |- roullout
     |- site.js
 |- index.js

여기 모듈 레지스터index.js

import Vuex from 'vuex'
// Core modules
import coreCountry from "@/store/modules/core/country";
import coreRegion from "@/store/modules/core/region";
// Rollout modules
import rolloutSite from "@/store/modules/rollout/site";

export default new Vuex.Store({
  modules: {
    // Core modules
    core: {
      country: coreCountry,
      region: coreRegion,
    },
    // Rollout modules
    rollout: {
      site: rolloutSite
    }
  }
})

일부 컴포넌트에서는 액션을 정의하려고 합니다.

methods: {
  ...mapActions('rollout/site', [
      LIST_REQUEST
  ])
}

첫 번째 에러는 다음과 같습니다.rollout/site찾을 수 없는 이유는rollout모듈이 아닌 폴더입니다.site모듈이지 네스트된 모듈이 아닙니다.rollout.

Vuex 설명서에서는 도우미를 사용하여 중첩된 모듈의 내용을 바인딩하는 방법을 보여 주지만 중첩된 모듈이 있는 저장소의 아키텍처는 보여 주지 않습니다.

LIST_REQUEST는 types.js에서 온 액션으로 다음과 같이 정의됩니다.

export const LIST_REQUEST = "rollout/site/LIST_REQUEST";

site.js 모듈에서는 다음과 같이 사용할 수 있습니다.

const actions = {
    [types.LIST_REQUEST]: async ({ commit }, payload= {}) => {
        // your actions here...
    },
}

다음과 같은 디스패치액션이 아닌 mapActions()를 사용하고 있기 때문에$store.dispatch() 직접 할 수 있습니다.this.LIST_REQUEST()

import {
  LIST_REQUEST
} from "@/store/types/rollout/site";

export default {
  name: "SiteList",
  created() {
    this.LIST_REQUEST()
  },
  methods: {
    ...mapActions('rollout/site', [
      LIST_REQUEST
    ])
  }
}

LIST_REQUEST()는 함수가 아닙니다.이 오류는 mapAction이 동작을 기능으로 전환해야 하기 때문에 발생합니다.

네스트된 모듈에서 이러한 문제를 해결하고 index.js를 사용하는 방법.제가 좀 혼란스러운 것 같습니다만, 이 개념을 명확하게 해 주실 수 있겠습니까?

저는 이 글의 질문과 답변에 완전히 현혹되었고, 게시 당시 조회수가 1K였기 때문에 다른 수많은 사람들에게도 현혹되었을 것입니다.스스로 알아낸 후, 더 많은 사람들의 시간을 낭비하지 않기 위해 이곳에 게시하기로 결심했습니다.

답변:

사용하다

modules: {
  core: {
    namespaced: true,
      modules {
        // Core modules
        country: coreCountry,
        region: coreRegion,
      }
  },
  rollout: {
    namespaced: true,
    modules: {
      // Rollout modules
      site: rolloutSite
    }
  }
}

(아래 설명 참조)

넣지 않으면namespaced: true의 범위 내에서coreCountry,coreRegion,그리고.rolloutSite, 그것은 여전히 다음과 같을 것이다.this.$store.dispatch(rollout/LIST_REQUEST).끼우다namespaced: true원한다면 그 안에this.$store.dispatch(rollout/site/LIST_REQUEST)아니면, 당신이 말한대로this.LIST_REQUEST()사용하지 않다

methods: {
  ...mapActions('rollout/site', [
    LIST_REQUEST
  ])
}

"LIST_REQUEST() is not function" 오류는 지금쯤 수정되었을지도 모르지만, "rollout/site/LIST_REQUEST"는 함수의 이상한 이름이라고 생각했습니다.가지고 있는 것을 사용해 액션을 정의할 수 있습니다(실패하지 않는 경우는, 그 주변의 구문을 조작해 주세요).

const actions = {
    [types.LIST_REQUEST]: async ({ commit }, payload= {}) => {
        // your actions here...
    },
}

대신 액션을 정의하는 일반적인 방법(Vuex 가이드도 이 방법을 사용)을 권장합니다.

actions: {
  actionName (context, payload) {
    // async functions and commits here
  }
}

또는

actions: {
  actionName ({ state, rootState, commit, dispatch, getters, rootGetters }, payload) {
    // async functions and commits here
  }
}

설명:

이 있어도modules: { }(Vuex API 참조에 정의되어 있는) 모듈로 간주됩니다.

key: {
  // required (can be empty)
  state,

  // optional (as denoted by '?')
  namespaced?,
  mutations?,
  actions?,
  getters?,
  modules? // **nested modules go here**
}

따라서 모듈 내에 폴더라는 개념은 없습니다.넣을 때

module {
  core: { ... },
  rollout: { ... }
}

core ★★★★★★★★★★★★★★★★★」rollout폴더가 아닌 모듈로 인식됩니다.

그래서...

module {
  rollout: {
    site: { ... }
  }
}

안에 들어가는 것은 rollout은 (모듈로 인식됨)으로 .state:,namespaced:,mutations:,actions:,getters: , 「」modules:건른른른른

모듈을 하려면 , 「 」의 「 」의 「 」의 「 」의 「 」의 「 」의 「 」modules: { } 중 를 할 수 있다

1. 모듈을 직접 스테이트먼트에서 이름을 Import 」 「 Import 」 「 Import 」 （ 「 Import 」 。 modules: { coreCountry, coreRegion }
2. Import하다modules: { country: coreCountry, region: coreRegion }
3. 즉석에서 합니다(가져오지 ). '가져오다가져오지 않음).core: { module content here } ★★★★★★★★★★★★★★★★★」rollout: { module content here }제가 한 답변이나accountvuex 가이드에서

모듈을 는 '서브모듈'을 '에 넣기만 됩니다.modules: { }에서 만들어할 수도 있음)의를 들어 (가져오기)와 같습니다.core ★★★★★★★★★★★★★★★★★」rollout이 있어요.modules: { }루트 스토어 자체입니다.

네임스페이스를 를 설정해야 .namespaced★★★★

export default new Vuex.Store({
  modules: {
    rollout: {
      namespaced: true,
      site: rolloutSite
    }
  }
})

「 」를 하는 mapActions도우미, 도우미 이외의 다른 것은 Import 할 필요가 없습니다.라고 말해 주세요.rollout/site라는 방법이 요.foo이치노

methods: {
    ...mapActions({ foo: 'rollout/site/foo' })
}

언급URL : https://stackoverflow.com/questions/64844871/how-i-can-use-vuex-nested-modules