//src目錄下新建一個(gè)store目錄，創(chuàng)建index.js如下
//創(chuàng)建數(shù)據(jù)倉(cāng)庫(kù)
import Vuex from 'vuex';
import vue from 'vue';
import loginUser from 'loginUser.js'
Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {  //modules 可以把不同的狀態(tài)單獨(dú)的放在一個(gè)對(duì)象里面
        loginUser //是否正在登錄中
    },
    strict: true, //只允許通過(guò)mutations改變狀態(tài)
});

//創(chuàng)建一個(gè)loginUser.js，創(chuàng)建他的state/mutations/actions

//需要維護(hù)的狀態(tài)
state: {
       loading: false, //登錄狀態(tài)
       user: null, //當(dāng)前登錄的用戶(hù)
       },
//計(jì)算屬性
getters: {
       status(state) {
           if (state.loading) {
               return 'loading'
           } else if (state.user) {
               return 'login'
           } else {
               return 'unLogin'
           }
       }
   },
 
 //改變loading和user狀態(tài) 
mutations: {
       //設(shè)置loading
       setLoading(state, msg) {
           state.loading = msg
       },
       //設(shè)置用戶(hù)
       setUser(state, msg) {
           state.user = msg
       }
   },
 
 //actions中提交改變的狀態(tài)  
 actions: {
       //登陸方法ctx相當(dāng)于store
       async login(ctx, msg) {
           //登陸狀態(tài)設(shè)置為true
           ctx.commit("setLoading", true)
           const result = await xxxapi.login(msg.loginId, msg.loginPassword)
           if (result) {
               //登錄成功
               ctx.commit('setUser', result)
               //登陸成功后登陸狀態(tài)設(shè)置為false
               ctx.commit('setLoading', false)
           }
           //返回登陸是否成功
           return result
       },
       //判斷是否已登錄
       async isLogin(ctx) {
           //正在登錄中
           ctx.commit('setLoading', true)
           //調(diào)接口是否登陸
           const result = await xxxapi.isLogin();
           ctx.commit('setUser', result);
           ctx.commit('setLoading', false)
       },
       //注銷(xiāo)
       async logout(ctx) {
           ctx.commit('setLoading', false)
           await xxxapi.logout();
           ctx.commit('setUser', null);
           ctx.commit('setLoading', false)
       }
   },

<button :disabled="loading">{{ loading ? 'loading...' : '登錄' }}
</button>
computed: {
//在computed中封裝一下loading，不用每次調(diào)用都寫(xiě)this.$store.state.loginUser這一堆
    // loading() {
    //  return this.$store.state.loginUser.loading;
    // }
    // 優(yōu)化
    //輔助函數(shù)
    //import {mapState} from "vuex"
    ...mapState({
      loading: (state) => state.loginUser.loading
    })
  }

async handleSubmit() {
      const result = await this.$store.dispatch("loginUser/login", {
        loginId: this.loginId,
        loginPassword: this.loginPassword
      });
      if (result) {
        //  登錄成功 路由跳轉(zhuǎn)
        const path = this.$route.query.url || '/'
        this.$router.push(path)
      }
    },

  <!--      顯示頁(yè)面登錄狀態(tài)-->
<span v-if="status === 'loading'">正在登錄請(qǐng)稍等...</span>
​
<template v-else-if="status === 'login'">
    <span>當(dāng)前登錄用戶(hù){{user.name}}</span>
    <span @click="handleLogout">退出</span>
</template>
​
<router-link to="/login" v-else>
        登錄
</router-link>
  computed: {
...mapGetters("loginUser", ["status"]),
...mapState("loginUser", ["user"]),
}

async handleLogout(){
    await this.$store.dispatch("loginUser/logout")
    //跳轉(zhuǎn)到登陸頁(yè)面
    this.$route.push(/xxx)
},

每次頁(yè)面刷新需要檢測(cè)登錄狀態(tài)，在main.js中,也就是vue創(chuàng)建的時(shí)候就要判斷。
store.dispatch('loginUser/isLogin')

//routes.js中
import Home from "./xx/xx.vue"
export default[
{
      path:"/home",
    component:Home,
    meta: {
      auth: true, //需要權(quán)限才可以訪(fǎng)問(wèn)的頁(yè)面
    }
}
]
在index.js中設(shè)置路由守衛(wèi)
router.beforeEach((to, from, next) => {
    if (to.meta.auth) {
        // 需要登錄權(quán)限才可以訪(fǎng)問(wèn)
        const result = store.getters["loginUser/status"]
        if (result === 'loading') {
            //    加載狀態(tài)，不知道有沒(méi)有登錄
            //    跳轉(zhuǎn)一個(gè)正在登錄中頁(yè)面,并且要在頁(yè)面中監(jiān)控是否已經(jīng)登錄成功了，要不然會(huì)永遠(yuǎn)停留在這里
            //    并且路由跳轉(zhuǎn)的時(shí)候得記錄你之前是從哪里過(guò)來(lái)的，要不然不知道要跳轉(zhuǎn)到哪一個(gè)頁(yè)面
            next({
                path: '/loading', //去【正在登錄中】的頁(yè)面
                query: {
                    url: to.fullpath
                }
            })
        } else if (result === 'login') {
            // 登錄成功了
            next();
        } else {
            //    沒(méi)有登錄
           this.$message.info('你需要登錄');
             next({
                path: '/login', //去【正在登錄中】的頁(yè)面
                query: {
                    url: to.fullpath
                }
            })
        }
    } else {
        //不需要登錄權(quán)限就可以訪(fǎng)問(wèn)的頁(yè)面
        next()
    }
})

created() {
  this.unWatch = this.$watch(() => this.$store.getters["loginUser/status"], (status) => {
    console.log('此時(shí)的狀態(tài)', status);
    if (status !== 'loading'){
      this.$router.push(this.$route.query.url || '/home').catch(() => {}
    }
  }, {
    immediate: true
  })
},
destroyed() {
  //取消監(jiān)控
  this.unWatch()
}