vue vue-router vuex element-ui axios x的学习笔记（十） 完成vuex管理登陆状态

通过我不懈的思考和实验终于找到了该如何用vuex管理登陆状态，效果还能够，虽然在大佬眼里可能知识小儿科

首先store.js这样写就能够了

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

Vue.use(Vuex)
// 建立基本状态
const state = {
  user: JSON.parse(sessionStorage.getItem('user')) || ''
}
// 建立改变状态的方法
const mutations = {
  // 登陆
  LOGIN (state) {
    state.user = JSON.parse(sessionStorage.getItem('user'))
  },
  // 登出
  LOGOUT (state) {
    state.user = ''
  }
}
// 建立驱动actions能够使得mutations得以启动
const actions = {
  // 这里先来一个驱动LOGIN的东西就叫login吧
  login ({commit}) {
    commit('LOGIN')
  },
  // 一样来个logout
  logout ({commit}) {
    commit('LOGOUT')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

挂载行为

这样写能够把sessionStorage里面整个user都直接放在store里面，用户密码在返回数据的时候已经强制写成了null，作到这里真想给本身一浪锤，开始作的时候怎么就没想到这样写了？真的是实践出真知啊。
由于已经把action的diapatch写好了，只须要从store读数据就能够了

header.vue

读数据

使用数据

my.vue

测试

先登陆

提示登陆成功，右上角和mydata都显示出了该有的数据

测试退出登陆

提示退出成功，右上角也显示出了登陆和注册按钮

测试刷新页面

在登陆一次

刷新

刷新是正常的，仍然能够正确获取状态，虽然从图上看不出来。

---

总结一下

vuex折腾了几天，也许算勉强入门了吧，按官方的要求应该是写成点击提交以后全部异步操做都写在actions里面，包含发送axios请求这些，而后把登陆、注册、登出的state,mutation,actions都写在一个module里面，方便管理，我如今还没这么深刻，继续写下去如商品管理，发货管理能够会这么用到，到时候再深刻研究一下。

---

顺便再把footer页面写一下，这样至少看起来像一个完整的页面了
footer.vue

<template>
<el-row  class="footer">
  <el-col :span="8">
    <img src="../assets/logo.png" alt="">
  </el-col>
  <el-col :span="16">
    <p class="copy">Copyright © 2015-2017.会理县未济网络科技有限公司.All Rights Reserved.</p>
    <p class="beian">ICP备案号：蜀ICP备17008055号</p>
  </el-col>
</el-row>

</template>
<style scoped>
.footer {
  background: #eee;
}
img {
  width: 80px;
  height: 80px;
  margin: 40px 0;
}
p {
  margin: 50px 10px;
  color: #666;
}
</style>

随便写下，仍是看起来丑，犯这个就是个意思

明天开始写商品页面