[英]Vue computed property do not send data to template
I have a Login Page on which the user has to authorize and it is working.我有一个用户必须授权的登录页面,并且它正在工作。
Then the user is being redirected to the next page called Dashboard
and I want to get his user profile details from the different endpoint, using Vuex.然后用户被重定向到名为
Dashboard
的下一页,我想使用 Vuex 从不同的端点获取他的用户配置文件详细信息。
I can see in the console, that data is retrieved immediately after the page is loaded, but it's not displayed on the page, I need to refresh the page to load the data.我可以在控制台中看到,页面加载后立即检索数据,但它没有显示在页面上,我需要刷新页面才能加载数据。 Can someone help me to figure out how to get rid of the page reload and put the data there automatically?
有人可以帮我弄清楚如何摆脱页面重新加载并自动将数据放在那里吗?
First, under created()
I am using dispatch to get the data, and then in the computed present it.首先,在
created()
下,我使用 dispatch 来获取数据,然后在计算中呈现它。
Here is my code first Dashbaord.vue
and user.module.js
:这是我的代码,首先是
Dashbaord.vue
和user.module.js
:
import HeaderBar from "@/components/header/HeaderBar.vue";
export default {
name: "Dashboard",
components: { HeaderBar },
created() {
this.$store.dispatch("user_account/getUserDetails");
console.log("DASHBOARD: Created");
console.log(this.$store.status);
},
computed: {
currentUser() {
console.log("Computed");
console.log(this.$store.state);
return this.$store.state.user_account;
},
},
};
.dashboard {
h4 {
line-height: 18px;
}
}
<template>
<div>
<main role="main">
<div
class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3"
>
<h1 class="h1">Hi, {{ currentUser.first_name }}</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
Search will be here added
</div>
</div>
</div>
</main>
<div class="mt-4 mb-5">
<HeaderBar />
</div>
<main role="main">
<div class="row mb-2">
</div>
</main>
</div>
</template>
import UserService from "../services/user.service";
const user = JSON.parse(localStorage.getItem("user"));
console.log("USER MODULE: ")
console.log(user)
const initialState = user
? user
: null;
console.log(initialState)
export const user_account = {
namespaced: true,
state: initialState,
actions: {
async getUserDetails({commit}) {
return UserService.getUserDetails().then(
(user) => {
commit("getUserDetailsSuccess", user);
return Promise.resolve(user);
},
(error) => {
commit("getUserDetailsFailure");
return Promise.reject(error);
}
);
}
},
mutations: {
getUserDetailsSuccess(state, user) {
state.user = user;
},
getUserDetailsFailure(state) {
state.user = null;
}
}
};
user_account/getUserDetailsSuccess
sets state.user
, but your computed prop does not return .user
. user_account/getUserDetailsSuccess
uccess 设置state.user
,但您的计算道具不返回.user
。
It should look like this:它应该如下所示:
export default {
created() {
this.$store.dispatch('user_account/getUserDetails')
},
computed: {
currentUser() {
// return this.$store.state.user_account ❌
return this.$store.state.user_account.user
},
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.