Vue项目实践中的功能实现与要点

本贴记录项目实践中，各种功能的实现与技术要点，均有待改进。

路由切换的时候，显示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)
        }
    }