vue.js - vue单文件import了一个类，在export default之前实例化这个类，为什么会导致界面消失？

问题描述

问 题

项目使用了vue 2.1.0和vue-resource 1.0.3。ui用的是element-ui。

为了使用async和await来组织异步代码，就写了一个BaseResource类来封装vue-resource的异步操作。然而将BaseResource导入到vue文件中并实例化后， 前台界面却消失了。奇怪的是，如果是在mounted钩子中生成BaseResource的实例就没问题。

BaseResource.js

import Vue from 'vue'
import { MessageBox } from 'element-ui'

class BaseResource {
  constructor(path) {
    this.res = Vue.resource(path)
  }

  getData() {
    return transPromise(this.res.get())
  }
}

function transPromise(promise) {
  return promise.then((resp) => {
      let result = resp.body
      if (result.success) {
        return result.data
      } else {
        alertMsg(result.error)
      }
    })
}

function alertMsg(msg) {
  MessageBox.alert(msg, '错误提示', {
    confirmButtonText: '确定'
  })
}

export default BaseResource

如果是在export default之前实例化BaseResource，界面就会消失：

import Vue from 'vue'
import BaseResource from './model/BaseResource'
let res = new BaseResource('clients{/id}{/type}') //在这儿实例化BaseResource，界面会消失
export default {...}

但是，如果是在mounted钩子中实例化BaseResource，就没有任何问题：

export default {
 ...
    async mounted() {
        let clientRes = new BaseResource('clients{/id}{/type}') //在mounted中生成实例，没有问题
        try {
          let clientList = await clientRes.getData()
          this.clients = clientList
          this.loading = false
        } catch (err) {
            console.log(err)
        }
      }
  ...
}

请问，这个问题是由什么引起的？

解决方案

试验后已经将问题解决，只要将入口处引入vue-resource的代码转移到BaseResource类中就可以了。找了挺久，因为chrome控制台没有任何错误。不知是配置的问题还是本身没有触发报错机制，希望有人能和我说一下。

BaseResource

import Vue from 'vue'
import { MessageBox } from 'element-ui'
import VueResource from 'vue-resource' //将vue-resource在这儿引入就不会有问题
Vue.use(VueResource)

class BaseResource {
  constructor(path) {
    this.res = Vue.resource(path) //问题应该出在这
  }

  getData() {
    return transPromise(this.res.get())
  }
}

function transPromise(promise) {
  return promise.then((resp) => {
      let result = resp.body
      if (result.success) {
        return result.data
      } else {
        alertMsg(result.error)
      }
    })
}

function alertMsg(msg) {
  MessageBox.alert(msg, '错误提示', {
    confirmButtonText: '确定'
  })
}

export default BaseResource

我觉得问题应该出在BaseResource的构造方法中，因为我在这儿使用了Vue.resource，但是vue-resource插件在BaseResource实例化时未必被使用了。这一点我有点奇怪，因为我将项目vue文件的import提后到 Vue.use(VueResource)之后也没有用，这让我有点理不清import的机制：

import Vue from 'vue'
import VueResource from 'vue-resource'
import Element from 'element-ui'
import './assets/css/reset.css'
import 'element-ui/lib/theme-default/index.css'

Vue.config.debug = true
Vue.use(VueResource)
Vue.use(Element)
Vue.http.options.root = 'http://localhost:8080/cm'
import App from './App' //哪怕将App在这儿引入也没有用

在我看来，App是在引入vue-resource之后被import的，此时BaseResource类中的Vue.resource方法应该是可以使用的。看来，我对import的机制还是不够了解

这篇关于vue.js - vue单文件import了一个类，在export default之前实例化这个类，为什么会导致界面消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！