programing

Vuex [Quasar]에서 스토어에 액세스할 수 없음

prostudy 2022. 5. 18. 21:55
반응형

Vuex [Quasar]에서 스토어에 액세스할 수 없음

나는 처음으로 Quasar를 시도하고 모듈로 Vuex를 사용하려고 하지만 $store 속성이나 ...mapState에는 접근할 수 없다.약속 로그북이 Vue Devtools에 존재한다는 것을 알 수 있는데도 '정의되지 않은 속성 '로그북'을 읽을 수 없음'이라는 오류가 표시된다.Devtools에서 인쇄

여기 내 가게\index.js 입니다.

import Vue from 'vue';
import Vuex from 'vuex';
import logbook from './logbook';

Vue.use(Vuex);
export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      logbook,
    },
    strict: process.env.DEV,
  });
  return Store;
}

구성 요소

<template>
  <div>
    <div>
      <h3>RFID</h3>
      <q-btn @click="logData"
             label="Save"
             class="q-mt-md"
             color="teal"
      ></q-btn>
      <q-table
        title="Logbook"
        :data="data"
        :columns="columns"
        row-key="uid"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  name: 'RFID',
  mounted() {
    this.getLogbookData();
  },
  methods: {
    ...mapActions('logbook', ['getLogbookData']),
    ...mapGetters('logbook', ['loadedLogbook']),
    ...mapState('logbook', ['logbookData']),
    logData: () => {
      console.log(this.loadedLogbook);
    },
  },
  data() {
    return {

    };
  },
};
</script>

<style scoped>

</style>

여기 주가 있다.js

export default {
  logbookData: [],
};

콘솔에서 발생하는 오류

업데이트: 내가 함수를 선언했던 방식을 리팩터링하여 문제를 해결했다.다음에서 변경:

logData: () => { console.log(this.loadedLogbook); }

logData () { console.log(this.loadedLogbook); }

체크 더.quasar/app.jsfile. 비슷한 선이 있는가?import createStore from 'app/src/store/index'그리고 가게는 나중에 같은 파일에 있는 앱과 함께 내보내질까?

나는 네가 모든 mapx 기능을 혼동했다고 생각해.

...mapState 및 ...mapGetter는 계산된 속성을 제공하며 다음과 같이 처리되어야 함

export default {
  name: 'RFID',
  data() {
    return {

    };
  },
  mounted() {
    this.getLogbookData();
  },
  computed: {
    ...mapGetters('logbook', ['loadedLogbook']),
    ...mapState('logbook', ['logbookData']),
  }
  methods: {
    ...mapActions('logbook', ['getLogbookData']),
    logData: () => {
      console.log(this.loadedLogbook);
    },
  }
};

참조URL: https://stackoverflow.com/questions/58278907/cant-access-store-from-vuex-quasar

반응형