VueJS - Vue 未定义 [英] VueJS - Vue is not defined

问题描述

我曾挑战自己编写一个从 API 获取数据并将其显示在各种组件中的应用程序.我对 VueJS 很陌生.我使用 VueResource 来访问 API，使用 VueX 来进行状态管理.我已经设置了我的商店，我已经添加了动作、突变和 getter 等，一旦我在我的组件中添加 created 生命周期方法，我就会收到一个错误:

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

我的代码如下所示:

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>

我被卡住了，我不知道我做错了什么.你有什么想法吗?

And I got stuck and I don't know what I am doing wrong. Do you have any ideas?

我使用由 vue-cli 生成的典型样板并使用 Webpack 构建 main.js.

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

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

推荐答案

我的猜测是你使用了 Vue (like Vue.set()) 里面没有列出actions.js、mutations.js 或 getters.js，但忘记添加:

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'

在那个文件的开头.

这篇关于VueJS - Vue 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！