How to use getters.

[paulvanbladel]

This is my code, and the getter isn't working. No clue what's going wrong.

STORE CONFIG

import Vue from 'vue'
import Vuex from 'vuex'

import { Database } from 'vuex-typed-modules'
import { testModule } from './test.module.js'

Vue.use(Vuex)
const database = new Database({ logger: true })
export default new Vuex.Store({
  plugins: [database.deploy([testModule])]
})

MODUL/E

import { VuexModule } from 'vuex-typed-modules'

export const testModule = new VuexModule({
  name: 'testModule',
  state: {
    count: 1,
    myProp: 'banana'
  },
  getters: {
    testGetter (state) {
      return state.myProp
    }
  },
  mutations: {
    addCount (state, number) {
      state.count += number
    }
  }
})

SCREEN:

<template>
  <q-page padding>
    {{nativeState}}
    <q-btn
      label='inc'
      @click='increment'
    ></q-btn>
    <div>getter: {{ourTestGetter}}</div>
  </q-page>
</template>

<script>
import { testModule } from '../store/test.module'
export default {
  // name: 'PageName',
  methods: {
    increment () {
      testModule.mutations.addCount(5)
    }
  },
  computed: {
    nativeState () {
      return testModule.state.count
    },
    ourTestGetter () {
      return testModule.getters.testGetter
    }
  }
}
</script>

[victorgarciaesgi]

Hi @paulvanbladel , thanks for the feedback! Can you link me a reproducible use case? I'm actually having trouble to display getters in nuxt and i'm working on it!

[victorgarciaesgi]

Should be fixed on 2.1.0

[paulvanbladel]

Hi Victor, Thanks for the prompt update. Works great now. Just one question, what is the recommeded way, testGetter1 or testGetter2:

getters: {
    testGetter1 (state) {
      return state.myProp
    },
    testGetter2 () {
      return testModule.state.myProp
    }
  },

[victorgarciaesgi]

I don't know for sure, but I think the first one is recommended!