用vuex收集用户登录后的数据,该怎么从页面上加载出来

在Vue.js中，Vuex是一个状态管理库，用于集中存储和管理应用的所有组件共享的状态。当用户登录成功后，你可以将登录信息作为状态存储在Vuex store中。以下是基本步骤：

1. **创建store**:
首先，在`store/index.js` 或类似文件中，创建一个新的 Vuex store 并定义 `state`、`actions` 和 `mutations`。例如：

   import Vue from 'vue'
   export default new Vuex.Store({
     state: {
       user: null // 存储登录信息
     },
     mutations: {
       setUser(state, user) {
         state.user = user
       }
     },
     actions: {
       login({ commit }, credentials) { // 异步登录操作
         axios.post('/api/login', credentials)
           .then(response => commit('setUser', response.data))
           .catch(error => console.error('Login failed:', error))
       }
     }
   })

2. **触发action**:
当用户完成登录表单并提交，通过`this.$store.dispatch('login', { username: ..., password: ... })`在组件内触发`login` action。

3. **监听状态变化**:
使用`mapState`映射`user`到组件的属性，以便在`data()`或`computed`中轻松访问登录状态：

   computed: {
     loggedInUser() {
       return this.$store.state.user
     }
   }

4. **页面组件**:
现在可以在模板中显示登录用户的姓名或其他信息，如：

   <template>
     <div v-if="loggedInUser">
       Welcome, {{ loggedInUser.name }}!
     </div>
   </template>

5. **守卫** (optional):
如果你想在整个应用中统一处理权限检查，可以设置路由守卫（`beforeEach`），在这里检查用户是否已登录：

router.beforeEach((to, from, next) => {
  if (!to.meta.requiresAuth && !loggedInUser) {
    // 用户未登录，跳转到登录页
    next('/')
  } else {
    next()
  }
})