programing

VueJ - Vue가 정의되어 있지 않습니다.

bestcode 2022. 8. 21. 19:41
반응형

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

반응형