vue使用vuex获取用户信息

在Vue中使用Vuex获取用户信息也是一种常见的方法，通过将用户信息存储在Vuex的state中，可以方便在应用程序的任何地方获取。

以下是一个示例代码，假设你已经在Vuex中定义了一个名为`user`的模块，其中包含一个`state`属性，用于存储用户信息：

// 在Vuex的user模块中定义state属性
const state = {
  userInfo: null // 初始值为null
}

// 在Vuex的user模块中定义mutations用于修改state
const mutations = {
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo; // 将用户信息存储在state中
  },
  clearUserInfo(state) {
    state.userInfo = null; // 清空用户信息
  }
}

// 在Vue组件中使用Vuex获取用户信息
<template>
  <div>
    <h1 v-if="userInfo">欢迎，{{userInfo.username}}</h1>
    <button v-if="!userInfo" @click="login">登录</button>
    <button v-if="userInfo" @click="logout">退出</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState('user', ['userInfo'])
  },
  methods: {
    ...mapMutations('user', ['setUserInfo', 'clearUserInfo']),
    login() {
      // 登录逻辑
      const userInfo = { username: 'test' }; // 假设登录成功后返回的用户信息
      this.setUserInfo(userInfo); // 将用户信息存储在Vuex的state中
    },
    logout() {
      // 退出逻辑
      this.clearUserInfo(); // 清空用户信息
    }
  }
}
</script>

在上述代码中，我们使用了Vuex的`mapState`和`mapMutations`方法，将Vuex的`state`和`mutations`映射到Vue组件的`computed`和`methods`中。通过使用`mapState('user', ['userInfo'])`，我们可以从Vuex的`user`模块中获取`userInfo`属性，并将其映射到Vue组件的`computed`中。在Vue组件的模版中，我们可以直接使用`userInfo`属性，来展示用户信息。同时，我们也可以使用`mapMutations('user', ['setUserInfo', 'clearUserInfo'])`，将Vuex的`setUserInfo`和`clearUserInfo` mutations映射到Vue组件的`methods`中，用于修改Vuex的`state`。