VueJS/Vuex/vue-router筆記- 開發/Error錯誤處理及優化相關記錄

 開發記錄備查筆記.....

 

 Q.Vuejs(2.6.x):TS下使用Vuex例子：

　　記一個ts下的vuex store，備查

　　可以用以前的ES寫法，但是想用強類型約束的話，就得改成TS的寫法.

　　(吐槽：vue雖然已經全部用TS重構了，但還是有大量的any變量,希望隨着以后的迭代，能完善成更出色的泛型類吧，現在的vuex真是不太好用，還不如自己寫單例)

　　

import Vue from 'vue';
import Vuex,{GetterTree,MutationTree,ActionTree, ModuleTree, MutationPayload} from 'vuex';

Vue.use(Vuex);

class Store_State {
  /**全局彈窗 */
  public GlobalDialog = {
    bGameSetting : true
  };
}

//Get方法
const getters = <GetterTree<Store_State, any>> {
  
};

//狀態修改事件
const mutations = <MutationTree<Store_State>>{
    //顯示
    ShowGameSettingDialog(state:Store_State, payload:MutationPayload) {
        state.GlobalDialog.bGameSetting = payload.payload;
    }
};

//
const actions = <ActionTree<Store_State, any> >{
    fetchUserId(store) {
    }
};

//模塊
const modules = <ModuleTree<any>>
{

};

export default new Vuex.Store({
  state: new Store_State(),
  getters: getters,
  mutations: mutations,
  actions: actions,
  modules: modules
});

 然后改寫下Vuex的*.d.ts : node_modules\vuex\types\vue.d.ts

 如下：

import Vue, { ComponentOptions } from "vue";
import { Store } from "./index";
import { Store_State } from "@/store/store_core";

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    //這里把any修改成了store_State
    store?: Store<Store_State>;
  }
}

declare module "vue/types/vue" {
  interface Vue {
    //這里把any修改成了store_State
    $store: Store<Store_State>;
  }
}

 

 

Q.超大數據數組列表渲染優化:

　　1.插件/z組件大法

• • vue-virtual-scroller：https://github.com/Akryum/vue-virtual-scroller
  • vue-virtual-scroll-list：https://github.com/tangbc/vue-virtual-scroll-list

　　2.Vue使用object.freeze()實現單向渲染:

 　　　　wait

 

 Q.Vue，插入數據后,等待頁面渲染后執行函數:

　　例如我的html中的一個scroll 容器綁定了 array且需要保證scroll總是在底部的，則在我 push了數據后，需要等待頁面渲染后設置容器的滾動條位置.

　　就需要用到vue的this.$nextTick()

　　該函數沒此渲染都會生成新的promise對象，所以不必擔心重復調用問題

　　$nexttick() 文檔介紹：https://cn.vuejs.org/v2/api/#Vue-nextTick

使用例子: 

    this.$nextTick().then((vue:any)=>
    {
      let ele:any = document.getElementById('unzipfilelist');
      ele.scrollTop = ele.scrollHeight;
    });

 

Q.Vue:的虛擬路徑問題(vue-cli 2.x)：

IIS掛在VUE 應用程序的問題：

Vue-Client腳手架。WebPack默認的assetsPublicPath是站點的根路徑。如果在IIS站點下掛載Vue項目為應用程序的話會導致路徑錯誤。

解決方法：

修改項目中的

config/index.js里的assetsPublicPath為相對根路徑。

 

 Q.Vue錯誤:Failed to compile with 1 errors：

今天用Vue+Node.Js 做前端。遇到一個奇葩報錯：Failed to compile with 1 errors 一下子摸不着頭腦。

結果 翻了半天代碼。找到了原來是有一段 <div v-on:click=""></div> 導致報錯，真是B了狗

 更新:Vue client 更新后提示用好了很多,請盡量用新版本腳手架

Q:Vue錯誤:Error in render: "TypeError: Cannot read property 'matched' of undefined"

　 和 :Cannot read property 'matched' of undefined

JS語法寫法不嚴謹問題（辣雞語言，毀我青春薅我頭發）

報錯代碼：

import Vue from 'vue'
import App from './app.vue'
import sso from '../../router/sso'

new Vue({
  el: '#app',
  sso,
  template: '<App/>',
  components: { App }
})

 

 修正：

import Vue from 'vue'
import App from './app.vue'
import sso from '../../router/sso'

new Vue({
  el: '#app',
 router: sso,
  template: '<App/>',
  components: { App }
})

 

Q.Vue下的TypeScript 編程報 無法調用類型缺少調用簽名的表達式。類型“VueRouter”沒有兼容的調用簽名。(TS2349)：

 

如vue-Router

 

declare interface Vue {
$router: (options?: any) => VueRouter }

 

Q.Vue下的TypeScript 編程報 Syntax Error: Unexpected token：

通常是引用腳本是沒注意.

需要指定lang="ts"才行 例如：

<script lang="ts" src="./index.ts"></script>