Vue:如何让组件提供登录用户的信息来响应会话数据？

// 在Vue组件中使用Vuex的计算属性获取用户信息
<template>
  <div>
    <p>{{ user.name }}</p>
    <p>{{ user.email }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['user']),
  },
};
</script>

// 在Vuex的store中定义user状态和相关操作
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
  },
  getters: {
    user: (state) => state.user,
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    clearUser(state) {
      state.user = null;
    },
  },
  actions: {
    login({ commit }, credentials) {
      // 调用后端API进行用户登录，并获取用户信息
      // 示例代码，需要替换成实际的登录逻辑
      api.login(credentials)
        .then((response) => {
          commit('setUser', response.data.user);
          // 存储认证令牌，如使用localStorage.setItem('token', response.data.token);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    logout({ commit }) {
      // 清空用户信息和认证令牌
      commit('clearUser');
      // 如删除localStorage中的认证令牌，如使用localStorage.removeItem('token');
    },
  },
});