Image 121.png
经过我不懈的思考和实验终于找到了该如何用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
读数据
Image 122.png
使用数据
Image 123.png
my.vue
Image 124.png
测试：
先登录
Image 125.png
提示登录成功，右上角和mydata都显示出了该有的数据
测试退出登录
Image 126.png
Image 127.png
提示退出成功，右上角也显示出了登录和注册按钮
测试刷新页面
在登录一次
Image 128.png
刷新
Image 129.png
刷新是正常的，仍然可以正确获取状态，虽然从图上看不出来。
总结一下：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>
随便写下，还是看起来丑，犯这个就是个意思
Image 130.png
明天开始写商品页面
