Vuex Pathify

Vue / Vuex plugin providing a unified path syntax to Vuex stores


Pathify makes working with Vuex easy.

Its core mechanism is a custom path syntax (opens new window) which can reference any state property (and sub-property):



Store access (opens new window) and component wiring (opens new window) are unified with get(), set(), sync() and call() methods:

// global
const items = store.get('products/items')
store.set('products/items', items)

// component
computed: {
  total: get('products/total'),
  items: sync('products/items')

methods: {
  submit: call('products/submit')

Additional functionality includes wildcard (opens new window) and variable (opens new window) expansion:

computed: {
  product: get('products@items[index]')

Create store mutations in a single line (with support for sub-properties):

const mutations = make.mutations(state)


The overall approach results in a significant simplification of Vuex’s API:

  • from 4 operations, 4 helpers, 3 accessor syntaxes and 3 (or sometimes 4) naming formats
  • to 4 methods and 1 path format

The end result is a real-world reduction in setup, wiring, code and cognitive overhead. The code comparison (opens new window) demo demonstrates reductions in LOC of between 2 to 14+ times depending on store size and setup.

For more information, see the Pathify 101 (opens new window).


I hope you found this post interesting or inspiring.

If you want to engage further, follow me on Twitter or drop a comment or reaction below.

Either way, thanks for reading!