将 id 从 Vue 路由器参数传递给组件的 Vuex 调度
Pass id from Vue router param to component's Vuex dispatch
我有后端 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 中获取它们时,没有。
您正试图在 http 请求完成之前访问 getter。等created
.
中的promise应该就够了
道具是字符串
此外,prop 是以字符串形式出现的,因此 ===
将不匹配。您可以先将其转换为 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));
}
我有后端 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 中获取它们时,没有。
您正试图在 http 请求完成之前访问 getter。等created
.
道具是字符串
此外,prop 是以字符串形式出现的,因此 ===
将不匹配。您可以先将其转换为 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));
}