将 id 从 Vue 路由器参数传递到组件的 Vuex 调度答案

【问题标题】：Pass id from Vue router param to component's Vuex dispatch将 id 从 Vue 路由器参数传递到组件的 Vuex 调度
【发布时间】：2021-05-03 14:33:41
【问题描述】：

我有后端 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
},

我想显示每个用户，例如 users/1 我想从 API 获取我的第一条记录。

在 Vuex 状态下我有：

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

吸气剂：

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)
    }

在我的 DisplayUser.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 中获取它们时。

【问题讨论】：

标签： javascript vue.js vuex vue-router vuex-modules

【解决方案1】：

您正试图在 http 请求完成之前访问 getter。等待created中的promise应该就够了。

道具是一个字符串

此外，道具以字符串形式出现，因此 === 将不匹配。您可以先将其转换为 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));
}

【讨论】：