Question

为什么我在这里没有将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正在工作。怎么可能未定义？

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？

2 个答案: