CODEWITHSUNDEEP
vue.jsvuex
Shamoon
Shamoon

Reputation: 43501

How can I access a getter from a namespaced module with vuex?

My module has:

export default {
    namespaced: true,
    state: {
        conversations: false
    },
    getters: {
        getConversation(state, ConversationId) {
            console.log('here i am!')
            let conversation = _.find(state.conversations, { id: ConversationId })
            console.log('conversation', conversation)
            return conversation
        },

In my component, I'm trying:

export default {
  name: "ConversationDetail",
  components: { HeaderSection },
  computed: {
    ...mapGetters("conversation", ["getConversation"]),
    ConversationId() {
      return this.$route.params.ConversationId;
    },
    conversation() {
      return this.getConversation(this.ConversationId);
    }
  },
  methods: {
    ...mapActions("conversation", ["loadConversation"])
  },
  mounted() {
    this.loadConversation(this.ConversationId);

But am getting an error:

Error in render: "TypeError: this.getConversation is not a function"

What am I doing wrong?

Upvotes: 2

Views: 230

Answers (1)

MarcRo
MarcRo

Reputation: 2473

You are referencing the getter correctly, however, if you wish to pass parameters to your getter it needs to return a function that takes your parameter, for example with a curried lambda:

getter: (state) => (ConversationId) => {...}

Upvotes: 5

Related Questions