为什么这里没有定义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 原型的方式。

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

Answer 2

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

参考：Using promise in vue-resource

我希望这能解决您的问题。

为什么这里没有定义Vue？

Why is Vue not defined here?

javascript

vue.js

vue-resource

vue-component

vuex