인스턴스에서 정의되지 않았지만 I Vuex 렌더링 중에 참조되는 속성 또는 메서드

인스턴스에서 정의되지 않았지만 I Vuex 렌더링 중에 참조되는 속성 또는 메서드

다음과 같은 에러가 발생.

[Vue warn] :속성 또는 메서드 "updateData"는 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.데이터 옵션에서 비활성 데이터 속성을 선언하십시오.

코드로 알 수 있는 바로는 방법이 있기 때문에 Vuex에 대한 무지함 때문에 놓치고 있는 것이 있습니다.나는 그 문제를 검색해서 꽤 많은 답을 얻었지만, 그 중 어느 것도 내가 어떻게 해야 할지 더 현명하게 해주지 못했다.뭔가 범위가 있는 것 같아요, 제 생각엔요.

아래의 에러도 표시되지만, 양쪽의 근본 원인은 동일하기 때문에 한쪽을 해결하면 다른 한쪽이 해결됩니다.

[Vue warn] :이벤트 "click"에 대한 잘못된 처리기: 정의되지 않았습니다(구성 요소에서...)

가격은 다음과 같습니다.경로가 올바른 위치로 가는 것을 확인했습니다.지금으로서는 어떻게 트러블 슈팅을 시작해야 할지 전혀 모르겠습니다.어떤 힌트라도 주시면 감사하겠습니다.

<template>
  <div id="nav-bar">
    <ul>
      <li @click="updateData">Update</li>
      <li @click="resetData">Reset</li>
    </ul>
  </div>
</template>

<script>
  import { updateData, resetData } from "../vuex_app/actions";

  export default {
    vuex: {
      getters: { activeDataRow: state => state.activeDataRow },
      actions: { updateData, resetData }
    }
  }
</script>

편집

입력 후 메서드 속성을 포함하도록 내보내기를 개선했습니다(단, 여전히 동일한 오류가 남아 있습니다).

export default {
  vuex: {
    getters: { activeDataRow: state => state.activeDataRow }, 
    actions: { updateData, resetData }, 
    methods:{ 
      updateData: () => this.$store.dispatch("updateData"), 
      resetData: () => this.$store.dispatch("resetData")
    }
  }
}

가게에서 다른 일을 해야 하나요?이렇게 생겼어요.

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const state = { dataRows: [], activeDataRow: {} };
const mutations = {
    UPDATE_DATA(state, data) { state.dataRows = data; state.activeDataRow = {}; },
    RESET_DATA(state) { state.dataRows = []; state.activeDataRow = {}; }
};

export default new Vuex.Store({ state, mutations });

가져온 기능은 다음과 같이 Vue 구성 요소 메서드로 추가해야 합니다.도움을 받을 수 있습니다.mapActions설명서에 기재되어 있습니다.이것은 매핑하기 위해 필요합니다.this.updateDate로.this.$store.dispatch('updateDate').

<script>
  import { updateData, resetData } from "../vuex_app/actions";
  import { mapActions } from 'vuex'

   export default {
    vuex: {
      getters: { activeDataRow: state => state.activeDataRow },
      actions: { updateData, resetData }
    },
    methods: {
       ...mapActions(['updateData', 'resetData'])
    }
  }
</script>

편집필

사용하고 싶지 않은 경우mapActions, 를 사용할 수 있습니다.this.$store.dispatch이 예에서 사용하고 있는 것처럼 다음과 같이 vuex를 삽입하지 않고 vue component 수준(정보)에서 메서드를 사용해야 합니다.

export default {
  vuex: {
    getters: { activeDataRow: state => state.activeDataRow }, 
    actions: { updateData, resetData }
  }, 
  methods:{ 
    updateData: () => this.$store.dispatch("updateData"), 
    resetData: () => this.$store.dispatch("resetData")
  }
}

언급URL : https://stackoverflow.com/questions/40877970/property-or-method-not-defined-on-the-instance-but-referenced-during-render-i-vu