source

Vue가 정의되지 않은 이유는 무엇입니까?

factcode 2022. 9. 1. 23:11
반응형

Vue가 정의되지 않은 이유는 무엇입니까?

Vue가 오류로 정의되지 않은 이유는 다음과 같습니다.

export default {
    state: {
        projects: {
            loading: true,
            failed: false,
            lookups: [],
            selectedId: 0
        }
    },
    mutations: {
        loadingProjectLookups (state, payload) {
            state.projects.loading = true;
            state.projects.failed = false;
        }
    },
    actions: {
        loadProjectLookups (context) {
            return new Promise((resolve) => {
                // VUE NOT DEFINED HERE:
                Vue.http.get('https://my-domain.com/api/projects').then((response) => {
                    context.commit('updateProjectLookups', response.data);
                    resolve();
                },
                response => {
                    context.commit('failedProjectLookups');
                    resolve();
                });
            });
        }
    }
}

vue 설정은 다음과 같습니다.

'use strict';
import Vue from 'vue';
import Vuex from 'vuex';
var VueResource = require('vue-resource');


/* plugins */ 
Vue.use(Vuex);
Vue.use(VueResource);


/* stores */
import importPageStore from './apps/import/import-page-store';


/* risk notification import */
import ImportApp from './apps/import/import-app.vue';
if (document.querySelector("#import-app")) {
    var store = new Vuex.Store(importPageStore);
    new Vue({
        el: '#import-app',
        store,
        render: h => h(ImportApp)
    });
}

Vue는 글로벌하게 정의되어 있기 때문에 정의되어 있지 않은 이유를 알 수 없습니다.덧붙이면import Vue from 'vue'그러면 http가 정의되어 있지 않다는 메시지가 나타납니다.Vue는 글로벌하게 이용할 수 없는 것 같습니다.이러한 작업을 수행할 필요가 없기 때문에, 왜 Vue를 글로벌하게 이용할 수 없는 것 같습니까?

웹 팩을 사용하여 vue 컴포넌트를 빌드하고 있습니다.이 방법론을 사용하여 렌더링한 다른 페이지가 있는데 잘 작동합니다.하지만 이건 아니야?나는 솔직히 왜 그런지 모르겠다.왜 그런지 모르겠기 때문이다.페이지가 렌더링되어 기능합니다.나는 Vue가 일하고 있는 것을 볼 수 있어요.어떻게 정의되지 않을 수 있죠?

컴포넌트에서는this.$http단, 스토어에서는 Import가 필요합니다.Vue매번.

할 수 있는 것은, 다음의 커맨드를 작성하는 것입니다.service폴더와 Vue를 Import합니다.그럼 스토어 파일에서 서비스를 참조해 주세요.

다음은 예를 제시하겠습니다.https://github.com/vuejs/vuex/issues/85

이것은 다음과 같은 것을 시사합니다.

/services/auth.module

import Vue from 'vue'

export default {

  authenticate(request) {

      return Vue.http.post('auth/authenticate', request)
        .then((response) => Promise.resolve(response.data))
        .catch((error) => Promise.reject(error));

    },

    // other methods 
}

스토어 파일:

import { AUTHENTICATE, AUTHENTICATE_FAILURE } from '../mutation-types'
import authService from '../../services/auth'

export const authenticate = (store, request) => {

  return authService.authenticate(request)
    .then((response) => store.dispatch(AUTHENTICATE, response))
    .catch((error) => store.dispatch(AUTHENTICATE_FAILURE, error));

}

// other actions

이것이 VueResource가 확장되는 방법입니다.Vue프로토타입입니다.

Object.defineProperties(Vue.prototype, {
        // [...]
        $http: {
            get() {
                return options(Vue.http, this, this.$options.http);
            }
        },
       // [...]
    });
}

VueResource는 약속 자체를 처리합니다.따라서 요청을 약속으로 포장할 필요가 없습니다.Promise.all()은 나중에 사용할 수 있습니다.하지만 여러 요청이 보이지 않으므로 get request만 사용하세요.

레퍼런스:vue-resource에서 약속 사용

이것으로 그 에러에 대한 당신의 문제가 해결되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/48525090/why-is-vue-not-defined-here

반응형