本贴记录项目实践中,各种功能的实现与技术要点,均有待改进。
路由切换的时候,显示loading动画
目前方案是: 在每个页面都手动装载一个loading组件
组件的显示依赖vuex里面的一个值 , 在router的beforeEach事件里面控制loading的状态
<template>
<div>
<div v-show="isLoading" class="myloading"><van-loading type="spinner" color="white"/></div>
</div>
</template>
<script>
export default {
data(){
return {}
},
computed:{
isLoading(){
return this.$store.state.isLoading
}
}
}
</script>
<style>
.myloading{
background-color: #666;padding:20px;border-radius:5px;display:inline-block;
position:fixed;z-index:999999;top:50%; left:50%;transform:translate(-50%,-50%);
}
</style>
main.js的router.beforeEach事件:
//显示loading
store.commit('setLoading',true)
//延迟一会加载页面,让loading效果显示一会。。。
setTimeout(()=>{
next()
},300);
在vuex里面使用axios
vue脚手架3中,vuex是以单文件存在,即store.js,里面要使用axios
需在头部import axios,然后直接调用axios.get...
不知是否最佳姿势的“用户登录-保存状态”的方案
登录页调用vuex里面的action,获取goken,并写入localstorage
actions: {
login(state){
return new Promise((resolve,reject)=>{
axios.get('/gettoken',{parmas:{}})
.then(function(response){
resolve(response)
localStorage.setItem("userToken",response.data.data)
})
.catch(function(e){
reject(e)
})
})
},
getUserInfo(store,token){
axios.get('/api/userinfo.json',{parmas:{token}})
.then(function(response){
console.log("拉取用户信息成功:",response.data.data)
store.commit('setLoginInfo',response.data.data)
})
.catch(function(e){
console.log(e)
})
}
},
在路由守卫里面,判断是否有token, 则获取用户信息
let AUTO_LOGIN_TOKEN = localStorage.getItem("userToken")
// 如果有保存token 就自动登录
if(AUTO_LOGIN_TOKEN != null && AUTO_LOGIN_TOKEN != undefined && AUTO_LOGIN_TOKEN != 'undefined'){
console.log('token正常:',AUTO_LOGIN_TOKEN)
if(store.getters.isLogin==0){
console.log('准备自动登录,拉取用户信息。。。')
store.dispatch('getUserInfo',AUTO_LOGIN_TOKEN)
}
}