无法从 Vuex [Quasar] 访问商店答案

【问题标题】：Can't access store from Vuex [Quasar]无法从 Vuex [Quasar] 访问商店
【发布时间】：2020-02-05 07:13:54
【问题描述】：

我第一次尝试 Quasar 并尝试将 Vuex 与模块一起使用，但我无法访问 $store 属性，也无法使用 ...mapState。即使我可以看到 Vue Devtools 上存在承诺日志，我也会收到以下错误“无法读取未定义的属性 'logbook'”。 Print from 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>

这里是 state.js

export default {
  logbookData: [],
};

Error that I get on the console

更新：通过重构我声明函数的方式解决了这个问题。我从：

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

到

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

【问题讨论】：

您似乎在 Store 对象中缺少 namespaced: true

标签： vue.js state vuex store quasar

【解决方案1】：

检查.quasar/app.js 文件。是否有类似于import createStore from 'app/src/store/index' 的行，并且商店随后与应用程序一起导出在同一个文件中？

【讨论】：

您好，感谢您的意见。问题在于我声明函数的方式。我从：logData: () => { console.log(this.loadedLogbook); } 更改为 logData () { console.log(this.loadedLogbook); } 并且成功了。

【解决方案2】：

我认为你混淆了所有的 mapx 函数。

...mapState 和 ...mapGetters 提供计算属性，应该像这样处理

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);
    },
  }
};

【讨论】：