mapgetters vuex modules code example

Example 1: vuex mapgetters

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Example 2: vuex getter root state

const getters = {
  getParams: (state, getters, rootState) => {
    return rootState.route.params
  }
}

Example 3: vuex namespaced getters

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  }),
  ...mapGetters('some/nested/module', [
    'someGetter', // -> this.someGetter
    'someOtherGetter', // -> this.someOtherGetter
  ])
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

Example 4: vuex namespaced getters

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  }),
  ...mapGetters([
    'some/nested/module/someGetter', // -> this.$store.getters['some/nested/module/someGetter']
    'some/nested/module/someOtherGetter', // -> this.$store.getters['some/nested/module/someOtherGetter']
  ])
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this.$store.getters['some/nested/module/foo']()
    'some/nested/module/bar' // -> this.$store.getters['some/nested/module/bar']()
  ])
}