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_modulesvuex ypesvue.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>