# 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()`
## Motivation
[Vuex](https://vuex.vuejs.org/) 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
## 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()`
# Support
If you like what I built, you can say thanks by buying me a coffee! :)
Buy me a coffee
Thank you so much!! Every little bit helps.
Buy me a coffee
Thank you so much!! Every little bit helps.