时间戳

首页 > 解决方案 > 将 id 从 Vue 路由器参数传递到组件的 Vuex 调度

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

问题描述

我有后端 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 中获取它们时。

标签： javascriptvue.jsvuexvue-routervuex-modules

解决方案

您正在尝试在 http 请求完成之前访问 getter。等待中的承诺应该足够了created。

道具是一个字符串

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

推荐阅读