我第一次尝试使用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); }
答案 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))
}