• Github repository
• Original issue
• Документация на русском

What problems does it solve?

The add-on adds two new mappers - mapData and mapMethods.

mapData replaces mapState and mapGetters. Works like mapGetters, but in case Vuex store does not find a suitable getter, it looks for a value in the state and returns it.

Similarly, mapMethods replaces mapMutations and mapActions. Works like mapActions, but if Vuex does not find an action with the given name, it finds a mutation with that name and commits it.

mapData and mapMethods – these names are not settled yet. You can suggest your options in this issue.

Install

Requires vuex@^3.0.0 (>=3.0.0 <4.0.0). Otherwise, it will load a copy of the appropriate version of Vuex into node_modules.

npm i vuex-map

import { mapData, mapMethods } from 'vuex-map';

export default {
  ...
}

You can also use CDN.

<!-- Development version -->
<script src="https://unpkg.com/vuex-map"></script>

<!-- Production version -->
<script src="https://cdn.jsdelivr.net/npm/vuex-map/dist/vuex-map.cdn.min.js"></script>

The methods will be available as VuexMap.mapData and VuexMap.mapMethods.

You can see the simplest example here.

Use

You can use the usual vuex syntax.

mapData

Use mapData if you want to get values from state or getters.

computed: mapData(['text'])

or

computed: {
  ...mapData(['text'])
}

mapMethods

Use mapMethods if you want to get methods from mutations or actions.

The usual vuex syntax, nothing special.

methods: mapMethods(['increment'])

methods: {
  ...mapMethods(['increment'])
}

With modules:

methods: mapMethods('some/nested/module', ['increment'])

mapMethods with function syntax

There is one case where the syntax of mapMethods is different from mapActions. This is when it is used with function syntax.

In the function, as the first parameter, instead of commit or dispatch, you get the { commit, dispatch } object, from which you select the function you need: commit for commit a mutation or dispatch for action dispatching.

For example:

mapMethods({
  foo({ dispatch }, arg) {
    dispatch('increment');
  }
})

This greatly reduces the usefulness of mapMethods. Therefore, using mapMethods with function syntax is not recommended.

TODO:

• Add types;
• Set up our own work environment. While we use vuex scripts.