VueJS - Vue не определен - PullRequest
Новая
       20

VueJS - Vue не определен

0 голосов
/ 03 октября 2018

Я поставил перед собой задачу написать приложение, которое получает данные из API и отображает их в различных компонентах.Я довольно новичок в VueJS.Я использую VueResource для доступа к API и VueX для управления состоянием.Я настроил свой магазин, добавил действия, мутации, геттеры и т. Д., И как только я добавляю created метод жизненного цикла в свой компонент, я получаю сообщение об ошибке: 

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)
    ...

Мой код выглядит какследующее:

main.js 

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

store.js 

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

App.vue 

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

И я застрял, и яне знаю, что я делаю не такУ вас есть какие-либо идеи?

ОБНОВЛЕНИЕ

Я использую типичный шаблон, сгенерированный vue-cli, и собираю main.js с помощью Webpack.

actions.js 

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

mutations.js 

import * as types from './types';

export default {
    [types.MUTATE_UPDATE_VALUE]: (state, payload) => {
        state.value = payload;
    }
};

getters.js 

import * as types from './types';

export default {
    [types.VALUE]: state => {
        return state.value;
    }
};

Ответы [ 2 ]

0 голосов
/ 01 августа 2019

В GSP это 

<asset:javascript src="/vuebundle.js"/>
0 голосов
/ 03 октября 2018

Я предполагаю, что вы используете Vue (например, Vue.set()) внутри не перечисленных actions.js, mutations.js или getters.js, но забыли добавить: 

import Vue from 'vue'

Вначало этого файла.

...