无法从Vuex [Quasar]访问商店

时间:2019-10-08 01:00:38

标签: vue.js state vuex store quasar

我第一次尝试使用Quasar,并尝试将Vuex与模块一起使用,但是我无法访问$ store属性或... mapState。即使看到Vue Devtools上存在承诺日志,也会出现以下错误“无法读取未定义的属性”日志”。 Print from Devtools

这是我的store \ 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); }

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

... mapState和... mapGetters提供计算出的属性,应按以下方式处理

var body: some View {
    Color.clear    // << placeholder
        .frame(maxWidth: .infinity, maxHeight: 25)
        .overlay(GeometryReader { gp in
            // chart is here
            HStack(spacing: 0) {
                Rectangle().fill(Color.blue)
                    .frame(width: 0.6 * gp.size.width)
                Rectangle()
                    .fill(Color.yellow)
                    .frame(width: 0.1 * gp.size.width)
                Rectangle()
                    .fill(Color.pink)
                    .frame(width: 0.3 * gp.size.width)
            }
        })
        .clipShape(RoundedRectangle(cornerRadius: 8))
}