반응형
VueJ - Vue가 정의되어 있지 않습니다.
API에서 데이터를 가져와 다양한 컴포넌트로 표시하는 앱에 도전해 보았습니다.나는 VueJs에 꽤 익숙하지 않다.API 타격에는 VueResource를 사용하고 상태 관리에는 VueX를 사용합니다.스토어 설정, 액션 추가, 변환 및 getter 추가 등을 완료하고 추가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.discloss.main.discloss.
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.displaces를 설정합니다.
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를 빌드합니다.
actions.syslog
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;
}
};
getters.displays(게터s.displays)
import * as types from './types';
export default {
[types.VALUE]: state => {
return state.value;
}
};
내 생각엔 넌 이 모든 걸Vue
(마치Vue.set()
리스트 되어 있지 않은 내부).actions.js
,mutations.js
또는getters.js
, 그러나 추가하지 않았습니다.
import Vue from 'vue'
그 파일의 선두에.
GSP에서는
<asset:javascript src="/vuebundle.js"/>
언급URL : https://stackoverflow.com/questions/52633753/vuejs-vue-is-not-defined
반응형
'programing' 카테고리의 다른 글
C의 printf 함수 코드 (0) | 2022.08.21 |
---|---|
y -= m < 3은 무엇을 의미합니까? (0) | 2022.08.21 |
vue 3에서 vuex 모듈을 사용하는 방법 (0) | 2022.08.21 |
VueJ는 부모로부터 자녀 컴포넌트의 데이터에 액세스합니다. (0) | 2022.08.21 |
Vuex의 "router.currentRoute.name"이 변경되었을 때 계산된 속성 업데이트 (0) | 2022.08.21 |