Skip to content
Vue / Vuex plugin providing a unified path syntax to Vuex stores
JavaScript TypeScript
Branch: develop
Clone or download
davestewart Merge pull request #58 from KaelWD/fix/accessor-types
 fix(types): add proper generics to accessors
Latest commit 407bf23 Jun 22, 2019

README.md

splash

Overview

Pathify makes working with Vuex easy, with a declarative, state-based, path syntax:

pathify-diagram

Paths can reference any module, property or sub-property:

pathify-diagram

Get or set data without syntax juggling or worrying about implementation:

pathify-diagram

Set up one or two-way data binding on any store value without bloat or fuss:

pathify-diagram

Wire multiple properties or sub-properties using array, object and wildcard formats:

pathify-diagram

Map store actions in exactly the same way, even using wildcards:

pathify-diagram

Set up your store – no matter how complex – in a single line:

pathify-diagram

And... that's it.

Vuex comparison

Conversely, working with Vuex directly requires is much more work.

Store setup is a manual and laborious process:

vuex-mutations

Getting and setting values requires juggling accessors, syntax and naming:

vuex-code

Component wiring can require up to 4 different helpers, name juggling, plus additional template binding:

vuex-helpers

Writing computed properties takes this much code per property for 2-way wiring:

vuex-helpers

Essentially, vanilla Vuex takes a lot of manual JavaScript coding to both set up and maintain.

Check out the code comparison demo which illustrates a reduction in Vuex code when using Pathify, of between 2 and 14 times (or more) depending on store size and setup.

Summary

In practical terms, Pathify results in:

  • less cognitive overhead
  • zero store boilerplate
  • one-liner wiring
  • cleaner code
  • lighter files

Next steps

Get started:

Demos:

You can’t perform that action at this time.