programing

Vue 3 구성 요소 내부의 Vuex 4 상태 데이터를 다른 디스패치를 위한 페이로드로 사용하는 방법

prostudy 2022. 4. 27. 21:32
반응형

Vue 3 구성 요소 내부의 Vuex 4 상태 데이터를 다른 디스패치를 위한 페이로드로 사용하는 방법

나는 Vue 3 Composition API를 사용하고 Vuex 4의 Store 후크를 사용하고 있다.

설정() 내의 vuex 저장소에서 데이터(ids)를 가져오는 방법

    setup () {
                const store = useStore()    
                const allIds = computed(() => store.state.ids)               
    
            function printIds () {
                console.log(allIds.value)
               }
             //...
         }

문제는 allIds 어레이가 Proxy로 포장되어 있어 사용할 수 없다는 것이다.console.log(allIds.value) -

여기에 이미지 설명을 입력하십시오.

이 어레이를 템플릿에서 사용할 때는 정상적으로 작동하지만 이 데이터를 어레이의 ID 중 하나를 사용하여 구성 요소 내에서 다른 작업을 디스패치하는 페이로드로 사용하고 싶다.내가 어떻게 그럴 수 있을까?내가 찾은 모든 예는 템플릿에 저장 데이터를 사용하는 것이다.

고마워요.

프록시는 데이터를 페이로드로 사용하는 것을 방해하지 않고 단지 데이터를 사용하면 된다..value거기서 데이터에 접근한다.

allIds변수는 배열이 있는 객체pads재산따라서 배열의 첫 번째 항목을 전달하려면 다음과 같이 하십시오.

const store = useStore()    
const allIds = computed(() => store.state.ids)               
    
store.dispatch('actionName', allIds.value.pads[0]);

저장하다

actions: {
  actionName({ commit }, payload) {
    console.log(payload);
  }
}

참조URL: https://stackoverflow.com/questions/66301476/how-to-use-vuex-4-state-data-inside-vue-3-component-as-payload-for-another-dispa

반응형