使用vuex存储用户登录信息

• 作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
• 座右铭：未来是不可确定的，慢慢来是最快的。
• 个人主页：极客李华-CSDN博客
• 合作方式：私聊+
• 这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
• 我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
• 微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

使用vuex存储用户登录信息

本文讲解如何使用vuex，存储用户登录的信息。

原理讲解

存储信息

首先，在我们的store.js文件中定义state:

import { createStore } from 'vuex'
const store = createStore({
  state: {
    user: null
  },
  // ...
})
export default store

其中user为null表示当前没有用户登录。接下来，我们可以创建一个用户登录的action，负责获取用户信息并调用mutation更新state中的数据：

import axios from '@/axios'

export default {
  login ({ commit }, user) {
    return axios.post('/api/login', user).then(response => {
      if (response.status === 200 && response.data.success) {
        commit('setUser', response.data.user)
        return true
      } else {
        throw new Error('Login failed!')
      }
    })
  },
  // ...
}

同样地，在这个action中，我们首先发送POST请求到后端API接口进行登录验证。若成功，就调用commit方法并触发名为’setUser’ 的mutation，同时将获取到的用户信息作为参数传递给该mutation：

export default {
  setUser (state, user) {
    state.user = user
  },
  // ...
}

最后，我们可以从Vuex store中声明一个getter方法，以方便访问该用户的信息：

export default {
  currentUser: state => state.user,
  // ...
}

同样地，当我们需要访问当前登录的用户信息时，只需要在组件中使用mapGetters方法映射所需要的getter即可。例如：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['currentUser']),
    // ...
  },
  // ...
}

获取信息

如果你已经完成了上面的步骤，将用户登录信息保存在了vuex的state中，那么在之后的开发中，你可以使用Vuex提供的mapGetters映射辅助函数来访问该用户信息。下面举一个Vue单文件组件的例子：

<template>
  <div>
    <p v-if="user">
      当前用户：{{ user.name }}
    </p>
    <button @click="login">登录</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['currentUser'])
    // 即可通过 this.currentUser 访问该用户的信息
  },
  methods: {
    ...mapActions(['login']),
    // 调用 this.login() 方法触发登录事件
  }
}
</script>

我们通过在computed中使用mapGetters映射当前用户信息，即可使用this.currentUser获取到该用户的信息（假设该信息在store中存储为{ name: ‘jack’, age: 25 }）。如果用户未登录（即store中的currentUser为空），则该段代码里的p元素不会被渲染出来。

另外，在methods中使用mapActions映射login方法，即可在组件中调用该方法进行用户登录操作，从而将用户信息保存到store中。

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下