CODEWITHSUNDEEP
typescriptvue.jsvuexstoregetter
farahm
farahm

Reputation: 1326

Vuex Store getter function not found

This is my getters in the vuex store:

  const getters= {
    getUser: (state:any) =>  {return state.user}
  };

In my view I do:

<script lang="ts">
  ...
  import {createNamespacedHelpers} from 'vuex'
  const {mapMutations, mapGetters} = createNamespacedHelpers('user');

  export default Vue.extend({

    computed: {
      ...mapGetters([
        'getUser'
      ])
    },

    methods: {
      ...mapMutations([
        'change'
      ]),
      login() {
        this.change(email); //This is a function in the mutations. And this is working
        this.loggedin = this.getUser(); // Here it says error

      }
    }
  });

I get the error:

TypeError: this.getUser is not a function. The call this.change(email); to the mutation function is working though.

Upvotes: 1

Views: 2850

Answers (1)

Satyam Pathak
Satyam Pathak

Reputation: 6912

computed properties are not methods so they don't get invoked. It behaves like setters and getters

this.getUser is a computed property, behaves more as a value itself. You trying to treat it as method when you put () after to make it invoke. Which is not possible as it's not a fn that's why that error shows up.

Refer this - https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods.

Vuex getters/states get included in computed properties of vue instances as their work itself is to return a value. However mutations/actions get include inside methods properties as it's job is to perform an operation example - making async request and update a state

Upvotes: 5

Related Questions