vue3（vuex）登录立即显示登陆头像和昵称

src下store文件index.ts里

import { createStore } from "vuex";

export default createStore({
  state: {
    loginhead: "", //登录头像
    loginname: "", //登录名字
  },
  mutations: {
    setname(state, data) {
      state.loginhead = data.head;
      state.loginname = data.name;
    },
  },
  actions: {},
  modules: {},
});

登陆或者注册请求完成后

localStorage.setItem(
                  "user",
                  JSON.stringify(data.Resregister.user)
                );
                const nickname111 = data.Resregister.user!;
                store.commit("setname", {
                  name: nickname111.nickname!,
                  head: nickname111.defaultAvatar!
                });

展示页面

<div>{{$store.state.loginname}}</div>
 <img :src="$store.state.loginhead" style="width:30px;height:30px;"/>

 onMounted(() => {
      // 是否登录展示
      if (localStorage.getItem("user")) {
        data.user = JSON.parse(localStorage.getItem("user")!);
        store.commit("setname", {
          name: data.user.nickname!,
          head: data.user.defaultAvatar!
        });
      } else {
        store.commit("setname", {
          name: "",
          head: ""
        });
      }
    });