Question

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

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

将 id 从 Vue 路由器参数传递给组件的 Vuex 分派

1 个答案: