Vue计算属性不向模板发送数据

Question

我有一个用户必须授权的登录页面，并且它正在工作。

然后用户被重定向到名为Dashboard的下一页，我想使用 Vuex 从不同的端点获取他的用户配置文件详细信息。

我可以在控制台中看到，页面加载后立即检索数据，但它没有显示在页面上，我需要刷新页面才能加载数据。 有人可以帮我弄清楚如何摆脱页面重新加载并自动将数据放在那里吗？

首先，在created()下，我使用 dispatch 来获取数据，然后在计算中呈现它。

这是我的代码，首先是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;
        }
    }
};

Answer 1

user_account/getUserDetailsSuccess uccess 设置state.user ，但您的计算道具不返回.user 。

它应该如下所示：

export default {
  created() {
    this.$store.dispatch('user_account/getUserDetails')
  },
  computed: {
    currentUser() {
      // return this.$store.state.user_account ❌
      return this.$store.state.user_account.user
    },
  },
}

演示