Why is Vue not defined here?

Question

Why am I getting 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();
                });
            });
        }
    }
}

This is my vue config:

'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)
    });
}

My understanding is that Vue is defined globally and I cannot see why it is not defined. If I add import Vue from 'vue' to my store then I get a message that http is not defined. So I need to work out why Vue appears not to be available globally as I shouldn't have to do this.

I am using webpack to build my vue components. I have other pages rendered using this methodology and they work just fine. But this one does not? I am honestly stumped as to why as I cannot see any differences. The page renders and works. I can see that Vue is working. How can it be undefined?

Answer 1

In a component, you can use this.$http, however, in your store you will need to import Vue every time.

What you can do, is create a service folder and import Vue there. Then just reference your service in the store file.

There's an example here https://github.com/vuejs/vuex/issues/85

Which suggests something like this:

/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 
}

In your store file:

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

---

This is how VueResource extends Vue prototype.

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