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>

隨便寫下，仍是看起來醜，犯這個就是個意思

明天開始寫商品頁面