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
    },
  },
}

演示