创新实训十二章

创新实训6.16

• 登录界面设置
• vuex
• vuex的重大漏洞

登录界面设置

今天我们本来是打算把登录和注册功能先完成的，但是不在一起真的挺难对接的，因为搞登录界面的同学把他的代码发给我之后出了很多的bug，我就不得不狠下心来把界面重新设计了，然后我把登录的逻辑写完了，就弄到了晚上十点多，主要是我对vue并不是很熟悉，所以在做前端接口的时候就出现了很多的问题，尤其是不同的组件之间的数据共享问题，这就困扰了我一晚上，直到十点多才弄出来，然后又有vuex数据丢失问题，我又弄了很久才解决，虽然今天看起来做的东西很少，但是我对vue的理解更加深入了，在后面的更新中应该会做的更快更好，毕竟第一次用vue写代码，bug简直多的出奇，一个个的bug改，从csdn上看博客看到很晚，才解决，但是明天的话我预计很快就能把注册的功能写完，毕竟登录和注册的功能还是很接近的，估计两个小时之内就能解决了。
对于登录界面我想说的是elementui虽然为我们提供了很多的组件，很方便，但是在另一方面也给我带来了很多麻烦，因为他的一些组件都是写死的，我要是用css单纯去改的话根本行不通，只有两个办法：第一个办法就是用官方提供的接口去改，但是官方很难找，我都是从csdn上找的有经验的人写的，第二个方法就是直接找到element的源码，然后暴力修改源码就可以了，但是这个不好的就是修改了之后所有的相同组件都会被修改掉，这就有点得不偿失了。反正我经过今天修改界面的经历我觉得还是应该学好css，毕竟根源的东西是不能变的，而且用好了css做出的界面绝对不会比别人提供的差。那就展示一下我做了将近一下午的登录界面吧。
这是我照着Oracle的官网做的，感觉还是挺有美感的，暂时就弄成这样吧，等后面做完功能可以再改。

vuex

我就不过多的介绍什么是vuex了，其实vuex很像是一个管理全局变量的插件，用起来其实很方便，但是我不知道它到底是太高深了呢，还是vue的作者写vuex的时候太随意了，我在做的时候遇到了无数的bug，其实就是vuex害得我一晚上才做出来登录界面的，但是好在我基本上掌握了怎么用vuex，还是不错的，其实要不是我遇到太多的问题的话这个是真的好用，有了vuex父子组件的通信其实就不用学了，vuex都能做了，只不过不推荐都用vuex而已。我就写一下vuex的基本写法吧。
const store=new Vuex.Store({
state:{
islog:JSON.parse(sessionStorage.getItem(‘islog’))||false,//显示登录状态，是否登录
accout:JSON.parse(sessionStorage.getItem(‘islog’))||’’,//账号
pass:’’,//密码。暂时不用
logsuccess:false//暂时没用
},
mutations:{
//使登陆状态变为登录，即为true
logstatechange(state){
state.islog=true;
sessionStorage.setItem(‘islog’,JSON.stringify(state.islog))

},
//记录账号
logaccout(state,acc){
state.accout=acc;
sessionStorage.setItem('account',JSON.stringify(state.accout))
},
//暂时不用
logsucces(state){
state.logsuccess=true
},

},
//这里面的方法暂时不用
getters:{
logsuccessget(state){
return this.logsuccess;
}
}
})
但是我觉得vuex还是太高深了，我也就是学会了它的基本用法，剩下的话还得花费时间去研究。
但是应该注意的是，应该在写vuex的文件中导入vue
import Vue from “vue”
import Vuex from “vuex”
Vue.use(Vuex)
这三步还是得有的，然后需要在main.js中注册一下就可以了。
import store from “./store”;
这样的话还是差最后一步：
new Vue({
el: ‘#app’,
router:router,
store,
render: h => h(App)
})
把store添加进去就可以在app.vue中使用了。具体怎么使用我就不说了，东西太多了。

vuex的重大漏洞

我在刚才说过了vuex是用来存储全局变量的，但是在我写完vue的时候却发现了一个致命的问题，vuex是不能缓存数据的，也就是说我要是刷新页面或者是跳转的话，vuex自己就初始化了，我就是在测试我的登录界面的时候发现了这个问题，然后我就去网上搜，发现其实很多人也碰到了这样的问题，而且也有大佬给出了解决方案。我就用了其中的一种
islog:JSON.parse(sessionStorage.getItem(‘islog’))||false,//显示登录状态，是否登录
accout:JSON.parse(sessionStorage.getItem(‘islog’))||’’,//账号
pass:’’,//密码。暂时不用
logsuccess:false//暂时没用
},
mutations:{
//使登陆状态变为登录，即为true
logstatechange(state){
state.islog=true;
sessionStorage.setItem(‘islog’,JSON.stringify(state.islog))

},
//记录账号
logaccout(state,acc){
state.accout=acc;
sessionStorage.setItem('account',JSON.stringify(state.accout))
},
其实就是在我改变vuex中定义的变量时，将他存到内存里，如果vuex数据刷新没了之后还可从内存中拿回来继续用，我测试的话这个方法是真实可行的，我打算后面就用这个方法了，但是有什么缺点我就不知道额了。要是不行我后面再换。