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) } }

 

關於生命週期和dom操做的一點事兒

項目中須要作一個仿app啓動頁，能夠滾動的廣告，而且有倒計時顯示

 mounted(){ //倒計時跳過
        let timehandler = setInterval(()=>{ this.countdown --
            if(this.countdown<=0){ this.$router.push('home') clearInterval(timehandler) } },1000) }, updated(){ //要放在updated裏面，由於這裏才完成dom渲染
        if(!this.Myswiper){ console.log('初始化swiper'); this.Myswiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', clickable:true }, autoplay:{ delay:10000 }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: false, spaceBetween:0 }); } },

總結：

一、由於倒計時的時候，頁面上也會顯示剩餘時間，每次都會觸發updated事件，倒計時操做若是放在updated裏面會出亂子

二、初始化swiper必須等dom都準備好，由於dom異步數據獲取 以後刷新的，因此也要放在updated裏面（用nextTick事件應該也能夠解決）
 可是有一點，上面定時器每次刷新時間都會觸發updated，只要把swiper對象，掛到vue實例中，判斷一下便可

 

計算屬性的坑點

這裏有2種方式，使用哪種看狀況而定，若是是第一種，不能在forEach的回調裏面return 

回調也是一個函數,裏面return 和 外面的函數return是兩碼事

第二種直接在for裏面return,做用域是在curScrollIndex中，因此生效

 computed:{ curScrollIndex(){ //方式 1
            let returnValue = 0
            this.foodsLiHeight.forEach((val,index)=>{ if(this.curScrollposY >= this.foodsLiHeight[index] && this.curScrollposY < this.foodsLiHeight[index+1]){ console.log('計算屬性：',index) returnValue = index } }) return returnValue // 方式 2
            for(let i=0;i<this.foodsLiHeight.length;i++){ if(this.curScrollposY >= this.foodsLiHeight[i] && this.curScrollposY < this.foodsLiHeight[i+1]){ console.log('計算屬性：',i) return i } } } },

 

關於使用全局Less

less很方便，設置好變量，方法，打算在main.js引入less文件，在各子組件中直接使用

可是無實現，經查閱，應該是webpack機制還沒法實現

參考：https://segmentfault.com/q/1010000010811479

 

單頁路由切換後，滾動高度不變的"BUG"

切換了路由，滾動高度會繼續上一個路由頁面的數值
在router實例中加入官方文檔說的scrollBehavior，不知爲什麼無效，也不想去折騰它

那隻能用最原始的辦法，在路由的beforeEach中作手腳：

router.beforeEach((to, from, next) => { console.log('beforeeach事件：',document.body.scrollTop) document.documentElement.scrollTop = 0; next() });

 

這裏要注意，使用了DTD文檔頭，要使用document.documentEelement.scrollTop