내보내는 모듈에는 이 항목의 컨텍스트가 제공되지 않음

내보내는 모듈에는 이 항목의 컨텍스트가 제공되지 않음

나는 그 문제의 공식화가 불쾌하다.개선을 제안하는 것이 용기를 내라.또한, 부끄럼(불안함)으로 인해 내가 hte 문제에 대한 진단에 결함이 있을 수 있다는 것을 명심해라.미안하다.

이 답안에서는 다음과 같은 방법을 사용할 것을 제안한다.this.$store.xxx내 코드에서 실패하는 이유는this정의되지 않았다.나는 코드 작성자가 한 어리석은 짓(그건 나일 것)을 강하게 의심하고 있으므로, 내 컴포넌트 레이아웃의 도식을 제시하겠다.

의도된 방법은 두 가지 요소를 만드는 랜딩 페이지 인덱스.js를 가지고 있다는 것이다. 하나는 애플리케이션의 시각적 요소를 위한 것이고 다른 하나는 정보의 저장을 위한 것이다.비주얼 앱은 탐색 모음(그리고 나중에 렌더링 영역)으로 구성된다.Navbar는 테이블, 목록 등을 표시하는 다른 *.vue 파일을 제공하는 저장소(및 보기 영역)에 명령을 전송한다.

그럼, 어떻게 내가 정의되지 않은 텍스트를 볼 수 있지?내 구조가 완전히 결함이 있는 것일까, 아니면 여기저기서 작은 디테일을 놓치고 있는 것일까?

인덱스 js

import Vue from "vue"
import Store from "./vuex_app/store"
import App from "./vuex_modules/app.vue"
new Vue({ el: "#app-base", components: { App }, store: Store });

store.js.

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = { ... };
const mutations = { ... };
export default new Vuex.Store({ state, mutations });

app.vue

<template><div id="app">App component<navigation></navigation></div></template>
<script>
import navigation from "./navigation.vue"
export default { components: { navigation } }
</script>

항해부에를 하다

<template><div id="nav-bar"><p v-on:click="updateData">Update</p></div></template>
<script>
import { updateData } from "../vuex_app/actions";
export default {
  vuex: {
    actions: { updateData },
    getters: { ... }
  },
  methods: {
    updateData: () => { 
      console.log("this is " + this);
      this.$store.dispatch("updateData");
    }
  }
}
</script>

actions.js

export const updateData = ({dispatch}, data) => { 
  console.log("invoked updateData"); 
  dispatch("UPDATE_DATA", data); 
};

Vue.js는 꽤 괜찮은 반응형 타입의 미니멀리스트 JavaScript 프레임워크를 제공한다.불행하게도, 이 링크에 따르면, 몇 가지 특이한 사용 요건이 있을 수 있다.이 경우,

인스턴스 속성이나 콜백(예: vm.$watch('a')에 화살표 기능을 사용하지 마십시오(예: vm.$watch('a'), newVal = > this.myMethod()).화살표 함수가 상위 컨텍스트에 바인딩되므로this네가 기대했던 대로 부에 인스턴스가 되지 않을거야this.myMethod정의되지 않을 것이다.

참조URL: https://stackoverflow.com/questions/40895694/the-context-of-this-not-provided-to-the-modules-exporting