I have challenged myself to write an app that fetches data from API and displays it in various components. I am pretty new to VueJS. I use VueResource for hitting the API and VueX for state management.
I have setup my store, I have added actions, mutation and getters, etc. and as soon as I add created
lifecycle method in my component I get an error:
ReferenceError: Vue is not defined
at Store.eval (eval at <anonymous> (build.js:1017), <anonymous>:11:3)
at Array.wrappedActionHandler (eval at <anonymous> (build.js:1338), <anonymous>:711:23)
at Store.dispatch (eval at <anonymous> (build.js:1338), <anonymous>:433:15)
...
My code looks like the following:
import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import store from './store/store'
Vue.use(VueResource);
new Vue({
el: '#app',
store,
render: h => h(App)
})
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
products: []
},
getters,
actions,
mutations
})
export default store
<template>
...
</template>
<script>
import { FETCH_MEALS } from './store/types';
export default {
//load meals on page load
created() {
this.$store.dispatch(FETCH_MEALS)
},
computed: {
meals() {
return this.$store.getters.meals
},
salads() {
return this.$store.getters.salads
},
lunches() {
return this.$store.getters.lunches
},
starters() {
return this.$store.getters.starters
}
}
}
</script>
And I got stuck and I don't know what I am doing wrong. Do you have any ideas?
I use a typical boilerplate generated by vue-cli and build main.js using Webpack.
import { API_ROOT } from '../config'
import * as types from './types';
export default {
[types.FETCH_MEALS]: ({commit}) => {
Vue.http.get(API_ROOT + '/meals.json')
.then(response => response.data)
.then(meals => {
commit(types.SET_MEALS, meals)
})
}
};
import * as types from './types';
export default {
[types.MUTATE_UPDATE_VALUE]: (state, payload) => {
state.value = payload;
}
};
import * as types from './types';
export default {
[types.VALUE]: state => {
return state.value;
}
};
My guess is that you use Vue
(like Vue.set()
) inside the not listed
actions.js
, mutations.js
or getters.js
, but forgot to add:
import Vue from 'vue'
In the beginning of that file.