Vuex Pathify

Overview

Pathify makes working with Vuex easy.

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

'products/items@filters.search'

Usage

Store access and component wiring 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 and variable expansion:

computed: {
  ...get('filters@*')
  product: get('products@items[index]')
}

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

const mutations = make.mutations(state)

Impact

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 demo demonstrates reductions in LOC of between 2 to 14+ times depending on store size and setup.

For more information, see the Pathify 101.

Links

• GitHub
• Documentation