Can't access store from Vuex [Quasar]

Question

I'm trying Quasar for the first time and trying to use the Vuex with modules but I can't access the $store property nor with ...mapState. I get the following error 'Cannot read property 'logbook' of undefined' even though I can see that the promise logbook exists on Vue Devtools. Print from Devtools

Here is my 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;
}

Here is the component

<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>

Here is the state.js

export default {
  logbookData: [],
};

Error that I get on the console

Update: Solved the problem by refactoring the way I declared the function. I changed from:

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

to

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

It seems like you're missing `namespaced: true` inside Store object — Matheus Valenza, Oct 08 '19 at 10:52

score 1 · Answer 1 · answered Oct 11 '19 at 13:40

1

Check the .quasar/app.js file. Is there a line similar to import createStore from 'app/src/store/index', and the store is later exported with the app in that same file?

answered Oct 11 '19 at 13:40

Doug Judy

49
5

1

Hello, thanks for your input. The problem was with the way I declared the function. I changed from: `logData: () => { console.log(this.loadedLogbook); }` to `logData () { console.log(this.loadedLogbook); }` and it worked. – Braganca Oct 12 '19 at 14:06

score 0 · Answer 2 · answered Aug 10 '20 at 13:21

I think you confused all the mapx functions.

...mapState and ...mapGetters provide computed properties and should be handled like this

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

Can't access store from Vuex [Quasar]

2 Answers2