Vue 라우터 매개 변수에서 구성 요소의 Vuex 디스패치에 ID 전달

Vue 라우터 매개 변수에서 구성 요소의 Vuex 디스패치에 ID 전달

백엔드 Laravel API를 사용하여

{
"id": 1,
"name": "Toni Stoyanov",
"email": "toni.nikolaev.23@gmail.com"
},

"id": 2,
"name": "Thomas Shelby",
"email": "st3851ba@gmail.com"
}
]

Vue의 내 경로:

 {
  path: '/users/:id',
  component: UserDetails,
  props:true
},

예를 들어 모든 사용자를 표시하고 싶다/1 API에서 첫 번째 레코드를 가져오고 싶다.

Vuex 상태에서는 다음을 수행합니다.

namespaced: true,
    state(){
        return{
            users: {
              
            }
        }
    },

getters:

getUsers(state){
        return state.users
    }

돌연변이:

SET_USER(state, data){
        state.users = data
    }

모든 사용자를 가져오는 다음 작업:

async setUsers(context){
        let response = await axios.get('users/all')

        context.commit('SET_USER',response.data)
    }

내 Display User에서vue는 다음과 같은 기능이 있습니다.

props:['id'],
    data(){
        return{
            selectedUser: null
        }
    },
    created(){
       this.$store.dispatch('users/setUsers')

        this.selectedUser = this.$store.getters['users/getUsers'].find(user => user.id === this.id);
    },

먼저 API에서 데이터를 가져오기 위해 액션을 디스패치하고 그 후 selectedUsers에서 동일한 ID 사용자를 찾으려고 합니다.하지만 콘솔에서는

this.$store.getters['users/getUsers'].find is not a function.

사용자에게 정적 데이터를 설정하면 모든 것이 작동될 수 있습니다!하지만 API에서 가져오면 no.

http 요청이 완료되기 전에 getter에 액세스하려고 합니다.약속을 기다리는 것으로 충분할 것이다.created.

그 소품은 끈이다.

그리고 소품도 끈으로 오니까===일치하지 않습니다.에 캐스트 할 수 있습니다.Number(this.id)첫 번째:

사용..then구문:

created(){
  this.$store.dispatch('users/setUsers').then(res => {
    this.selectedUser = this.$store.getters['users/getUsers'].find(user => user.id === Number(this.id));
  });
}

또는 사용async/await구문:

async created(){   // async keyword
  await this.$store.dispatch('users/setUsers')   // await this
  this.selectedUser = this.$store.getters['users/getUsers'].find(user => user.id === Number(this.id));
}

언급URL : https://stackoverflow.com/questions/65958434/pass-id-from-vue-router-param-to-components-vuex-dispatch