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
andmapMethods
– 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
; ...
You can also use CDN.
<!-- Development version --> <!-- Production version -->
The methods will be available as VuexMap.mapData
andVuexMap.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:
or
computed: ...
mapMethods
Use mapMethods
if you want to get methods from mutations
or actions
.
The usual vuex syntax, nothing special.
methods:
methods: ...
With modules:
methods:
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:
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.