Javascript 为什么这里没有定义Vue？

为什么我得到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正在工作。它怎么可能是未定义的？

在组件中，您可以使用

这个。$http

，但是，在您的商店中，您每次都需要导入

Vue

您可以做的是创建一个

服务

文件夹并在那里导入Vue。然后在商店文件中引用您的服务

这里有一个例子

这就意味着：

/服务/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

---

这就是扩展

Vue

prototype的方式

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

---

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

参考：

---

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

是

document.querySelector（“#导入应用程序”）

condition truthy？当脚本运行时，是否有id为导入应用程序的元素？是的，应用程序确实呈现并运行。但是，未定义对

Vue

的引用。哦，我看到，在您的组件中，您正在使用

Vue.http

，您需要在该文件中导入

Vue

，或者只使用

this.$http

来代替它。我已经尝试过了，如果我使用了它。$http我得到

\u这个。$http是未定义的

。渲染函数使用了

ImportAppStore

而不是

ImportAppStore

，并且

store

变量应该采用

importAppestore

而不是

importAppestore

来实现这一点当从存储中访问

VueResource

时也适用？虽然我刚刚完成了一个页面的工作，这个页面和这个页面几乎完全一样，而且很有效。Vue不是未定义的。本页的内容似乎有所不同。我必须强调，应用程序确实运行/它可以访问商店。但是由于某些原因，当我调用加载我的项目的操作时，Vue是未定义的。另外，如果我在我的浏览器控制台中键入

Vue

，它是未定义的，因为它不在我的其他页面上…可能在您的其他项目中

Vue

在全局对象中公开，请尝试并检查它是否通过

webpack.config

公开。另外，它不应在全局对象中公开，每个组件都应该在main

Vue

实例中调用，通常有一个

main.js

文件定义这个“main”实例。好的，我不知道这个模式。我正在使用文档选择器为每页定义一个Vue实例，以确定要呈现的应用程序。这些页面是独立的MVC页面。糟糕，我以为你要去Vue SPA。如果要将Vue集成到ASP.NET之类的东西中，则可以为每个页面创建一个实例。恐怕我需要更多的信息来帮助你。我将此讨论转移到聊天。