Image 121.png
經(jīng)過我不懈的思考和實驗終于找到了該如何用vuex管理登錄狀態(tài)，效果還可以，雖然在大佬眼里可能知識小兒科
首先store.js這樣寫就可以了
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 創(chuàng)建基本狀態(tài)
const state = {
user: JSON.parse(sessionStorage.getItem('user')) || ''
}
// 創(chuàng)建改變狀態(tài)的方法
const mutations = {
// 登錄
LOGIN (state) {
state.user = JSON.parse(sessionStorage.getItem('user'))
},
// 登出
LOGOUT (state) {
state.user = ''
}
}
// 創(chuàng)建驅(qū)動actions可以使得mutations得以啟動
const actions = {
// 這里先來一個驅(qū)動LOGIN的東西就叫l(wèi)ogin吧
login ({commit}) {
commit('LOGIN')
},
// 同樣來個logout
logout ({commit}) {
commit('LOGOUT')
}
}
export default new Vuex.Store({
state,
mutations,
actions
})
這樣寫可以把sessionStorage里面整個user都直接放在store里面，用戶密碼在返回數(shù)據(jù)的時候已經(jīng)強制寫成了null，做到這里真想給自己一浪錘醇疼，開始做的時候怎么就沒想到這樣寫了？真的是實踐出真知啊法焰。
因為已經(jīng)把action的diapatch寫好了秧荆，只需要從store讀數(shù)據(jù)就可以了
header.vue
讀數(shù)據(jù)
Image 122.png
使用數(shù)據(jù)
Image 123.png
my.vue
Image 124.png
測試：
先登錄
Image 125.png
提示登錄成功，右上角和mydata都顯示出了該有的數(shù)據(jù)
測試退出登錄
Image 126.png
Image 127.png
提示退出成功埃仪，右上角也顯示出了登錄和注冊按鈕
測試刷新頁面
在登錄一次
Image 128.png
刷新
Image 129.png
刷新是正常的乙濒，仍然可以正確獲取狀態(tài)，雖然從圖上看不出來。
總結(jié)一下：vuex折騰了幾天颁股，也許算勉強入門了吧么库，按官方的要求應(yīng)該是寫成點擊提交之后所有異步操作都寫在actions里面，包含發(fā)送axios請求這些甘有，然后把登錄诉儒、注冊、登出的state,mutation,actions都寫在一個module里面亏掀，方便管理忱反，我現(xiàn)在還沒這么深入，繼續(xù)寫下去如商品管理滤愕，發(fā)貨管理可以會這么用到温算，到時候再深入研究一下。
順便再把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.會理縣未濟網(wǎng)絡(luò)科技有限公司.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>
隨便寫下注竿，還是看起來丑，犯這個就是個意思
Image 130.png
明天開始寫商品頁面
