为什么这里没有定义 Vue？答案

【问题标题】：Why is Vue not defined here?为什么这里没有定义 Vue？
【发布时间】：2018-07-09 13:19:27
【问题描述】：

为什么我得到的 Vue 在此处未定义为错误：

export default {
    state: {
        projects: {
            loading: true,
            failed: false,
            lookups: [],
            selectedId: 0
        }
    },
    mutations: {
        loadingProjectLookups (state, payload) {
            state.projects.loading = true;
            state.projects.failed = false;
        }
    },
    actions: {
        loadProjectLookups (context) {
            return new Promise((resolve) => {
                // VUE NOT DEFINED HERE:
                Vue.http.get('https://my-domain.com/api/projects').then((response) => {
                    context.commit('updateProjectLookups', response.data);
                    resolve();
                },
                response => {
                    context.commit('failedProjectLookups');
                    resolve();
                });
            });
        }
    }
}

这是我的 vue 配置：

'use strict';
import Vue from 'vue';
import Vuex from 'vuex';
var VueResource = require('vue-resource');


/* plugins */ 
Vue.use(Vuex);
Vue.use(VueResource);


/* stores */
import importPageStore from './apps/import/import-page-store';


/* risk notification import */
import ImportApp from './apps/import/import-app.vue';
if (document.querySelector("#import-app")) {
    var store = new Vuex.Store(importPageStore);
    new Vue({
        el: '#import-app',
        store,
        render: h => h(ImportApp)
    });
}

我的理解是 Vue 是全局定义的，我看不出它为什么没有定义。如果我将import Vue from 'vue' 添加到我的商店，则会收到一条消息，指出未定义http。所以我需要弄清楚为什么 Vue 似乎无法在全球范围内使用，因为我不应该这样做。

我正在使用 webpack 来构建我的 vue 组件。我有使用这种方法呈现的其他页面，它们工作得很好。但是这个没有？老实说，我不知道为什么，因为我看不到任何差异。页面呈现并工作。我可以看到 Vue 正在工作。怎么可能是未定义的？

【问题讨论】：

document.querySelector('#import-app') 条件是否真实？运行此脚本时，您是否有 ID 为 import-app 的元素？
是的，该应用程序确实呈现并运行。但是没有定义对Vue 的引用。
哦，我明白了，在您的组件中，您使用的是Vue.http，您需要在该文件中导入Vue，或者只使用this.$http。
我已经尝试过了，如果我使用这个。$http 我得到_this.$http is undefined。
渲染函数使用ImportAppStore而不是ImportApp，store变量应该使用ImportPageStore而不是importPageStore

标签： javascript vue.js vue-component vuex vue-resource

【解决方案1】：

在组件中，您可以使用this.$http，但是，在您的商店中，您需要每次都导入Vue。

你可以做的是创建一个service 文件夹并在那里导入 Vue。然后只需在商店文件中引用您的服务。

这里有一个例子https://github.com/vuejs/vuex/issues/85

这暗示了这样的事情：

/services/auth.js

import Vue from 'vue'

export default {

  authenticate(request) {

      return Vue.http.post('auth/authenticate', request)
        .then((response) => Promise.resolve(response.data))
        .catch((error) => Promise.reject(error));

    },

    // other methods 
}

在您的商店文件中：

import { AUTHENTICATE, AUTHENTICATE_FAILURE } from '../mutation-types'
import authService from '../../services/auth'

export const authenticate = (store, request) => {

  return authService.authenticate(request)
    .then((response) => store.dispatch(AUTHENTICATE, response))
    .catch((error) => store.dispatch(AUTHENTICATE_FAILURE, error));

}

// other actions

这就是VueResource 扩展Vue 原型的方式。

Object.defineProperties(Vue.prototype, {
        // [...]
        $http: {
            get() {
                return options(Vue.http, this, this.$options.http);
            }
        },
       // [...]
    });
}

【讨论】：

从商店内访问VueResource 时，这是否也适用？虽然我刚刚完成了一个与此页面几乎完全相同并且有效的页面。 Vue 不是未定义的。此页面似乎有些不同。我必须强调该应用程序确实运行/它可以访问商店。但是由于某种原因，当我调用加载我的项目的操作时，Vue 是未定义的。此外，如果我在浏览器控制台中输入Vue，则它是未定义的，因为它不在我的其他页面上......
有可能在你的其他项目中Vue暴露在全局对象中，尝试检查它是否通过你的webpack.config暴露。
附带说明，它不应该暴露在全局对象中，每个组件都应该在主 Vue 实例中调用，通常有一个 main.js 文件定义这个'main'实例。
好的，我不知道这种模式。我正在使用文档选择器为每个页面定义一个 Vue 实例，以计算出要呈现的应用程序。这些页面是单独的 MVC 页面。
我的错，我以为你要去 Vue SPA。如果您将 Vue 集成到 ASP.NET 之类的东西中，您可以为每页创建一个实例。恐怕我需要更多信息才能提供帮助。我会将此讨论移至聊天。

【解决方案2】：

VueResource 自己处理承诺。因此，您不需要将请求包装在 Promise 中。您可以稍后使用 Promise.all() 。但是我没有看到多个请求，所以您只需使用 get 请求即可。

参考：Using promise in vue-resource

我希望，这可以解决您的错误问题。

【讨论】：