javascript - 为什么这里没有定义Vue？

Question

为什么我得到 Vue is not defined as an error here:

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 正在运行。怎么可能是undefined呢？

Answer 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 原型(prototype)。

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