使用vuex存储用户登录信息

GeekLiHua

发布于 2025-01-21 17:22:15

6700

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

使用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中。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-02-01，如有侵权请联系 cloudcommunity@tencent.com 删除

vuex