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 = newValwhy 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 valuesSet nested valuesDelete 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 valuesSet nested valuesDelete 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.