vuex-easy-access

What is Vuex Easy Access?

1. Zero boilerplate Vuex → auto generated actions & mutations!
2. Unified syntax for accessing your store through simple set() and get()

Full documentation

Motivation

Vuex is great for state management in a VueJS app, however it requires a lot of boilerplating setting up your store and all actions and mutations.

The Vuex philosophy

The philosophy of Vuex is to do everything through mutations that will record a history of the changes you make to the store. This makes it possible to easily track changes when things go wrong as your app grows.

The Vuex Easy Access philosophy

Instead of having to write all actions and mutations for each change you make to the store, wouldn't it be great if an action and mutation is generated for you from the start? That's exactly what Vuex Easy Access does!

Vuex Easy Access automatically generates actions and mutations for each state property!

JavaScript	Vuex Easy Access
In vanilla JavaScript you can simply do: object.prop.nestedProp = newVal why shouldn't you be able to do this with Vuex?	With Vuex Easy Access you can! set('object.prop.nestedProp', newVal)

And the best part is, all state changes go through a mutation under the hood!

Features

• Automatically generated actions & mutations to:
  • Set state values
  • Set nested state values
  • Delete values
  • Arrays: Push/shift/pop/splice values
  • Objects: use ID wildcards
• Shorthand store.set() for all the above
• Streamlined store.get() to get state valuess

Go to documentation

Short overview

1. auto-generated Vuex actions

_	actions generated from state
State props	eg. state: {someProp: {nestedProp: ''}}
Set values Set nested values Delete values	dispatch('module/set/someProp', newVal) dispatch('module/set/someProp.nestedProp', newVal) dispatch('module/delete/someProp') dispatch('module/delete/someProp.nestedProp')
Array props	eg. state: {someArray: []}
Push/shift/pop/splice values	dispatch('module/set/someArray.push', newVal) dispatch('module/set/someArray.shift') dispatch('module/set/someArray.pop') dispatch('module/set/someArray.splice', [ind, del, newVal])
Objects with id wildcard	eg. state: {someObject: {'*': ''}}
Set and delete	dispatch('module/set/someObject.*', {[id]: newVal}) dispatch('module/delete/someObject.*', id)

2. Easy Access shorthand

_	available setters
State props	eg. state: {someProp: {nestedProp: ''}}
Set values Set nested values Delete values	set('module/someProp', newVal)* set('module/someProp.nestedProp', newVal) delete('module/someProp') delete('module/someProp.nestedProp')
Array props	eg. state: {someArray: []}
Push/shift/pop/splice values	set('module/someArray.push', newVal) set('module/someArray.shift') set('module/someArray.pop') set('module/someArray.splice', [ind, del, newVal])
Objects with id wildcard	eg. state: {someObject: {'*': ''}}
Set and delete	set('module/someObject.*', {[id]: newVal}) delete('module/someObject.*', id)

* set() and delete() are attached to the Vuex store object: store.set()

Installation and setup　→

Support

If you like what I built, you can say thanks by buying me a coffee! :)

Thank you so much!! Every little bit helps.