Vuexgetter를 사용하여 하나의 요소를 검색하는 동안 오류가 발생했습니다.

Vuexgetter를 사용하여 하나의 요소를 검색하는 동안 오류가 발생했습니다.

저는 Vue/Vuex/Vue-router를 사용하여 단일 페이지 앱을 만들고 있습니다.

기본적으로 표시된 목록에서 하나의 레코드를 선택한 후 검색하려고 합니다. 제 스토어는 기본적으로 다음과 같이 구성되어 있습니다.

export const store = new Vuex.Store({
  state: {
    reports: null,
    loading: false,
    reportProcessing: false
  },
  getters: {
    getReports (state) {
      return state.reports
    },
    getReport (state) {
      return (id) => {
        return state.reports.find((item) => {
          return item.id === id
        })
      }
    }
  }
  // ...

사용하려고 할 때

data () {
  return {
    // Attempt to load the report by passing the current id
    report: JSON.parse(JSON.stringify(this.$store.getters.getReport(this.id))),
// ...

다음에 대한 오류를 표시합니다."SyntaxError: Unexpected token u in JSON at position 0"기본적으로 null/빈 개체를 반환합니다. 이는 작동하기 때문에 매우 혼란스럽습니다(개체 목록에서 첫 번째 요소 제외).

JSON.parse(JSON.stringify(this.$store.getters.getReports[0])),

따라서 개체 목록에 보고서(게터가 제대로 실행되는 것처럼 보임)가 포함되어 있다는 것을 알고 있습니다.하지만 ID를 수동으로 전달하려고 하면 작동하지 않습니다.this.$store.getters.getReport(1)

내가 정확히 뭘 잘못하고 있는 거지?

편집 : 현재 라우터 파일이 (단일 보고서 경로에 대해)로 설정되었습니다.

{
  path: '/report/:id',
  props: true,
  component: MainLayout,
  children: [
    { path: '', name: 'edit_report', component: EditReport }
  ]
}

기본적으로 vue-router의 하위 경로를 사용하여 기본 메뉴가 있는 레이아웃 내에서 구성 요소를 로드하고 있지만, 해당 경로에 대해 이 기능을 제거한 경우:

{
  path: '/report/:id',
  name: 'edit_report',
  props: true,
  component: EditReport
}

(분명히 메인 레이아웃 내에서 로드되지 않고) 작동했습니다. (다른 모든 페이지와 마찬가지로 메인 레이아웃 내에서 로드해야 하기 때문에) 이것이 수정 사항이 아님은 말할 필요도 없지만, 제가 잘못하고 있는 것과 관련이 있을 수도 있습니다.

다음을 사용하고 있습니다.this.id존재하지 않는.그.find()에서getReports()게터는 돌아올 것입니다.undefined그리고JSON.parse()그 오류를 던질 것입니다.

의 내역은 다음과 같습니다.JSON.parse(JSON.stringify(this.$store.getters.getReport(this.id))),와 함께this.id와 동등한.6:

• this.$store.getters.getReport(6)돌아온다undefined
• JSON.stringify(undefined)돌아온다undefined
• JSON.parse(undefined)던지다Uncaught SyntaxError: Unexpected token u in JSON at position 0오류

아래 데모.

const store = new Vuex.Store({
  strict: true,
  state: {
    reports: [{id: 1}, {id: 2}],
    loading: false,
    reportProcessing: false
  },
  getters: {
    getReports (state) {
      return state.reports
    },
    getReport (state) {
      return (id) => {
        return state.reports.find((item) => {
          return item.id === id
        })
      }
    }
  }
});
new Vue({
  store,
  el: '#app',
  computed: {
    reports: function() {
      return this.$store.state.reports
    },
  },
  methods: {
    callGetReport() {
      console.log(this.$store.getters.getReport(6));
      console.log(JSON.stringify(this.$store.getters.getReport(6)));
      console.log(JSON.parse(JSON.stringify(this.$store.getters.getReport(6))));
    }
  }
})

<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>Reports: {{ reports }}</p>
  <button @click="callGetReport">Click here to call getReport() - open browser's console to see result</button>
</div>

하위(내포) 경로에 소품 전달

당신은 그것을 이해하지 못합니다.id네스트된 경로에서. 왜냐하면props켜지지 않음:

{
  path: '/report/:id',
  props: true,
  component: MainLayout,
  children: [
    { path: '', name: 'edit_report', component: EditReport, props: true }
                                                       // ^^^^^^^^^^^^^ ------ added this
  ]
}

언급URL : https://stackoverflow.com/questions/49223991/error-when-attempting-to-retrieve-one-element-using-vuex-getter