Vuex: How to use getter in module?

[Namek]

The docs say:

Each module can contain its own state, mutations, actions, getters, and even nested modules

But modules this code represents only part of these:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

There are no getters.

What's more I don't know how to use module getters.

[jxlarrea]

The documentation for 2.0 is very lacking. You can actually use getters in your module the same way as actions.

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

[Namek]

Well, I have put getters into my module and tried to use it through computed -> mapGetters as usual in my component. What I get is:

vuex.js?90cb:106 [vuex] unknown getter: currentRecipe

[jxlarrea]

Try first without mapGetters to see if it works. Also, some code from your side would be helpful.

 computed: {
        user() {
            return this.$store.getters.user;
        }
    }

[Namek]

Thanks for your quick help! That was my fault.

I just debugged and I saw there was no getters in my module. Thought it was webpack's fault but no.

Issue lied in bad return in this small helper of mine:

export function defineModule({ state, mutations }) {
  if (!!mutations[undefined]) {
    throw new Error('there is undefined mutation!', mutations)
  }

  mutations[m.UPDATE_PROPERTY] = function(state, {prop, value}) {
    Vue.set(state, prop, value)
  }

  return { state, mutations }
}

of course I changed it to:

export function defineModule(module) {
  const { mutations } = module
  if (!!mutations[undefined]) {
    throw new Error('there is undefined mutation!', mutations)
  }

  mutations[m.UPDATE_PROPERTY] = function(state, {prop, value}) {
    Vue.set(state, prop, value)
  }

  return module
}

Thanks again.

[jxlarrea]

Glad to help!

[ianfieldarsclinica]

Sorry to resurrect, but I'm having a similar issue.

├── index.html
├── main.js
├── components
│   ├── App.vue
│   ├── Messages.vue
│   └── ...
└── store
    ├── index.js
    ├── actions.js 
    └── modules
        ├── messages 
        │  ├──store.js       
        │  └── actions.js 
        └── ... 

/components/Messages.vue:

<script>
  import { mapGetters, mapActions } from 'vuex'
  import Message from './Message.vue'
  import store from '../store/index';

  export default {
        components: { Message },
        computed: mapGetters(['messages', 'lastFetchedMessageDate']),
        methods: mapActions(['fetchInitialMessages', 'fetchNextMessage']),

        beforeMount() {
            if(this.lastFetchedMessageDate < 0){
                this.fetchInitialMessages();}
        }
    }
</script>

/store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import messagesModule from './modules/messages/store'
import userModule from './modules/user/store'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules:{
        messages: messagesModule,
        user: userModule
    }

});

export default store;

/store/modules/messages/store.js:

import { fetchInitialMessages, fetchNextMessage } from './actions'
import minBy from 'lodash/minBy';

const messagesModule = {
    state: { messages: [], lastFetchedMessageDate: -1 },
    mutations: {
        FETCH_NEXT_MESSAGE: (state, payload) => {
            state.messages = state.messages.concat(payload);
            state.lastFetchedMessageDate = minBy(state.messages, 'date').date;
        }
        ,
        FETCH_INITIAL_MESSAGES: (state, payload) => {
            store.replaceState(payload);
        }
    },

    actions: {
        fetchInitialMessages,
        fetchNextMessage
    },

    getters: {
        messages: state => state.messages,
        lastFetchedMessageDate: state => state.lastFetchedMessageDate
    },
}

/store/modules/messages/actions.js:

import axios from 'axios'

export const fetchInitialMessages = ({ commit }) => {
    axios.get('/api/Messages/Get').then( response  => {
        commit("FETCH_INITIAL_MESSAGES", response.data);
    }).catch( err => {
        console.log(err);
    });
}

export const fetchNextMessage = ({ commit }, lastFetchedMessageDate) => {
    axios.get('/api/Messages/FetchNextMessage/'+ lastFetchedMessageDate).then( response  => {
        commit("FETCH_NEXT_MESSAGE", response.data);
    }).catch( err => {
        console.log(err);
    });
}

errors:

[vuex] unknown getter: lastFetchedMessageDate 
[vuex] unknown getter: messages

Any ideas appreciated.

EDIT: I left namespaces out of this example, but per the documentation here https://vuex.vuejs.org/en/modules.html I tried namespaced=true, and setting the namespace params on mapGetters and mapActions. The result was:

[vuex] module namespace not found in mapGetters(): messages/
[vuex] module namespace not found in mapGetters(): messages/

[LinusBorg]

Hello @ianfieldarsclinica

Thank your for your interest in this project.

However, your issue is a usage/support question, and the issue tracker is reserved exclusively for bug reports and feature requests (as outlined in our Contributing Guide).

We encourage you to ask it on the forum , Stack Overflow or on gitter and are happy to help you out there.