详解Vuex管理登录状态

Vuex是一个专门为Vue.js应用程序开发的状态管理库，它能够用来管理整个应用程序的状态。其中包括登录状态的管理。下面将详细讲解如何使用Vuex来管理登录状态。

步骤一：安装Vuex

首先需要使用npm或yarn安装Vuex。使用npm安装的命令如下：

npm install vuex --save

步骤二：创建Vuex Store

在src目录下创建一个store目录，然后在store目录下创建一个index.js文件，这个文件就是我们的Vuex Store。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    isLoggedIn: false
  },
  mutations: {
    login (state) {
      state.isLoggedIn = true
    },
    logout (state) {
      state.isLoggedIn = false
    }
  }
})

export default store;

其中，state里面存储我们的登录状态，isLoggedIn的默认值为false。mutations里面定义我们的登录和登出方法。

步骤三：将Store注入Vue实例

在main.js文件中，将store注入Vue实例中。

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

步骤四：在组件中使用Store

现在我们已经完成了Store的创建和注入。在需要使用登录状态的组件中，可以通过以下方法获取Store中的值，并将其展示出来。

<template>
  <div>
    <h1 v-if="$store.state.isLoggedIn">已登录</h1>
    <h1 v-else>未登录</h1>
    <button v-if="!$store.state.isLoggedIn" @click="$store.commit('login')">登录</button>
    <button v-else @click="$store.commit('logout')">登出</button>
  </div>
</template>

在以上示例中，我们先判断是否已经登录。如果已经登录，则显示“已登录”文字；否则显示“未登录”文字，并展示一个登录按钮。登录按钮的点击事件会触发login方法，并将isLoggedIn状态设置为true。登出按钮会触发logout方法，并将isLoggedIn状态设置为false。

示例一：在Header组件中展示登录状态

下面我们来看一个实际的例子，如何在Header组件中展示登录状态。

<template>
  <div>
    <span v-if="$store.state.isLoggedIn">
      您好 {{ username }}，欢迎来到我们的网站。
      <button @click="$store.commit('logout')">退出登录</button>
    </span>
    <span v-else>
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
    </span>
  </div>
</template>

<script>
export default {
  computed: {
    username () {
      return this.$store.getters.username
    }
  }
}
</script>

在这个示例中，我们使用了computed属性，从Store中获取用户名并展示出来。同时，登录状态的判断也被放在了Header组件中。

示例二：在Guard中验证登录状态

下面我们来看一个示例，如何在Guard中验证登录状态。

import store from './store'

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (!store.state.isLoggedIn) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
      return
    }
  }
  next()
})

在这个示例中，我们使用了beforeEach路由守卫，验证当前是否已经登录。如果没有登录，则跳转到登录页面，并记录当前页面的地址。用户登录后可以回到之前的页面。

结语

通过上面的步骤和示例，相信您已经对Vuex管理登录状态有了一个完整的了解。在实际开发中，您可以灵活运用Vuex来管理不同的状态，使应用程序更加健壮和可维护。