vue.js - VueJS - 未定义 Vue
问题描述
我挑战自己编写一个从 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
应用程序.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 生成的典型样板,并使用 Webpack 构建 main.js。
动作.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)
})
}
};
突变.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
import Vue from 'vue'
在该文件的开头。
推荐阅读
- php - Laravel 5.1 中的文章、评论和用户关系
- android - 如何预览我的自适应图标?
- wordpress - 为什么我的帖子在分类菜单中格式不正确,但帖子预览很好?
- python - 将文件读入列表分隔值
- node.js - 每当onchild创建云功能实时数据库时添加父子
- assembly - 是什么导致文本显示在随机位置?
- java - 在 Java(搜索引擎)中从 URL 索引内容
- javascript - 在 div 结束时溢出不起作用
- javascript - 如何让 React 更新组件并在组件更新时运行功能?
- c# - 如何在 ASP.NET Core 2.1 中出现第一个错误后停止验证