无法从 Vuex [Quasar] 访问商店

Posted 2023-02-22

【中文标题】无法从 Vuex [Quasar] 访问商店

【英文标题】：Can't access store from 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 (/*  s-s-rContext  */) 
  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

【参考方案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);
    ,
  
;