使用vuex存储用户登录信息

浅浅的花香味﹌ 2024-03-16 14:40 79阅读 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中。