programing

vuej에서 rootState란 무엇인가, vuex 컨텍스트

nicegoodjob 2023. 2. 5. 09:52
반응형

vuej에서 rootState란 무엇인가, vuex 컨텍스트

난 이해하려고 노력했어rootState는 vuejs, vuex...와 함께 있지만 다음과 같은 키워드로 명확한 설명(구글 또는 기타 포럼)을 찾을 수 없습니다.

  • "root state" vuejs란
  • "루트 상태" vuej 이해
  • 기타

어떤 제품인지, 그리고 그 사용법을 어떻게 활용할 수 있는지 설명해 주실 수 있나요?

코드를 보다 효율적으로 구성하기 위해 vuex 저장소를 다른 모듈로 분할할 수 있습니다.그것에 대한 참고 자료를 참조하세요.

다음은 현재 진행 중인 프로젝트의 매장 예입니다.

가게

제 프로젝트에서는 API의 데이터가 여러 개 필요하기 때문에 이 API 응답 이후에 모든 기능을 하나의 모듈에 묶기 위해 스토어를 분할하기로 했습니다.index.js는 모든 모듈을 togeter로 전송하여 스토어를 내보내는 데 사용됩니다.

...
import categories from './modules/categories'
import transportation from './modules/transportation'
import insurances from './modules/insurances'
import booking from './modules/booking'

Vue.use(Vuex)


export default new Vuex.Store({

    modules: {
        categories,
        transportation,
        insurances,
        booking
    },

    state: {
        // here I have general stuff that doesn't need to be split in modules
    },

    mutations: {
        // general stuff
    },

    actions: {
        // general stuff
    },

    strict: true
})

rootState의 일반적인 정보에 액세스 할 필요가 있는 경우는,index.js또는 다른 모듈 내부에서 모듈의 데이터에 액세스 하는 경우.

예:

예약을 하려면 내 앱의 현재 사용자 중 어떤 카테고리가 선택되었는지 알아야 합니다.이를 실현하기 위해 나는 간단히 사용할 수 있습니다.rootState액션의 지지대:

/modules/categories.js

export default {
    namespaced: true,

    state: {
        categories: [ // data I need acces to ]
    }


/modules/booking.js

actions: {
    async PUT_BOOKING({ state, commit, dispatch, rootState }) {
          // access categories 
          const categories = rootState.categories.categories
          // rootState -> access root 
          // categories -> namespaced module in store
          // categories -> state categorie in namespaced module
    }
}

예를 들어 패스할 수도 있습니다.rootGetters행동으로 옮깁니다.이 예에서는,getter카테고리 배열에서 현재 선택된 카테고리의 인덱스를 반환하는 my categories 모듈(=state소품)

async PUT_BOOKING({ state, commit, dispatch, rootState, rootGetters }) {
      // access categories 
      const categories = rootState.categories.categories

      // acces index of selected categorie
      const index = rootGetters['categories/selCategorie']
}

제 예가 이해될 수 있고 제가 당신에게 조금 도움이 될 수 있기를 바랍니다.

언급URL : https://stackoverflow.com/questions/60120850/what-is-rootstate-in-vuejs-vuex-context

반응형