Ara you OK?
我看你是思想出现了偏差
哇!你认出了错别单词!恭喜你获得一次向我支付宝充值助我重返欧洲的机会!
这个页面管关不掉了,你自己看着办吧

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

 然后改写下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组件大法

  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>
posted @ 2017-09-10 23:36  林清  阅读(2916)  评论(0编辑  收藏  举报