vuex实现简单的登录功能

vuex的安装此处就不多说了
安装好后，在src下面新建vuex文件夹，并在vuex下面创建index.js文件

// 导入 vue和vuex,并把vuex挂载到vue实例
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    // 全局变量
    state: {
        user: undefined
    },
    // 修改全局变量必须通过mutations中的方法
    mutations: {
        login(state , payload) {
            state.user = payload
        },
        logout(state) {
            state.user = undefined
        }
    },
    // 异步方法用actions
    // actions不能直接修改全局变量，需要调用commit方法来触发mutations中的方法
    actions: {
        login (context, payload) {
            context.commit('login',payload)
        },
        logout (context) {
            context.commit('logout')
        }
    }
})
export default store

登录页
布局省略了，直接上图

// 登录事件处理,登录成功把登录信息同时存在本地一份，主要解决刷新页面重新登录问题
submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                	// 因为没有请求接口，再次只能先强制模拟了
                    if ( this.ruleForm.user == "admin" && this.ruleForm.pass == "123123" ) {
                    	// 我这里是用 dispatch 改变数据
                        this.$store.dispatch("login", this.ruleForm.user).then(() => {
                            this.$notify({
                                type: "success",
                                message: "欢迎你," + this.ruleForm.user + "!",
                                duration: 3000,
                            });
                            this.$router.replace("/");
                            sessionStorage.setItem("store",JSON.stringify(this.$store.state))
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: '用户名或密码错误',
                            showClose: true
                        })
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },

// App.vue
export default {
    name: "App",
    created () { 
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 
  }
};

这样解决了刷新页面vuex丢失问题
但是我发现加个路由守卫之后用户体验会更好些。
例如：当前所在页面是登录页，然后去vuex中查找user，找到了，证明登录过了，跳转首页；
如果不是登录页，vuex中有user ，跳转首页，反之跳转登录页

// 在router/index.js中添加路由守卫
router.beforeEach((to, from, next)=> {
  console.log('to0----',to);
  if(to.path != '/login' && !(store.state.user||JSON.parse(sessionStorage.getItem("store")))) {
    next({ name: '登录' })
  }
  if(to.path == '/login' && (store.state.user||JSON.parse(sessionStorage.getItem("store")))){
    next({ path: '/' })
  }
  next()
})

修改 vuex/index.js,再退出登录的时候，把本地缓存清空

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

Vue.use(Vuex)

const store = new Vuex.Store({
    // 全局变量
    state: {
        user: undefined
    },
    // 修改全局变量必须通过mutations中的方法
    mutations: {
        login(state , payload) {
            state.user = payload
        },
        logout(state) {
            sessionStorage.clear()
            state.user = undefined
        }
    },
    // 异步方法用actions
    // actions不能直接修改全局变量，需要调用commit方法来触发mutations中的方法
    actions: {
        login (context, payload) {
            context.commit('login',payload)
        },
        logout (context) {
            context.commit('logout')
        }
    }
})
export default store

这时候你可能遇到了 退出后，本地和vuex的数据都清空了，但是还会跳转到首页
我们再完善下App.vue

<script>
export default {
    name: "App",
    created () { 
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    if(JSON.stringify(this.$store.state) !== '{}'){
        window.addEventListener("beforeunload",()=>{
            sessionStorage.setItem("store",JSON.stringify(this.$store.state))
        })
    }
    
  }
};
</script>

到此位置所想需求就已完成了。程序没有一成不变的，如果您有其他的实现思路，也欢迎多多指教