vuex-pathify

Vuex Pathify provides a declarative, state-based, path interface to your Vuex store. Instead of traditional Vuex patterns, you access the store using path strings that can reference any module, property, or sub-property using the @ syntax.

Path Syntax Example: 'foo/bar@a.b.c'

This allows you to get or set data without worrying about the underlying implementation details or complex syntax juggling.

Pathify uses a declarative path syntax to access Vuex stores. This syntax supports module and property access, variable expansion, and wildcard expansion. It also provides direct access syntaxes to bypass standard get/set mapping for custom Vuex member names.

Paths are used in global store methods and component helpers:

// Global store usage
store.get('items')
store.set('products/items', items)

// Component helper usage
computed: {
  search: sync('products/filters@search')
}

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

// components
computed: {
  search: sync('products/filters@search')
}

Pathify uses a concept called Accessor Priority to automatically determine whether to use state/getters for reading data or actions/mutations for writing data. This simplifies the Vuex API by allowing you to request a property without specifying the implementation detail.

Priority Logic

• For Reads (get): A mapped getter is prioritized over a mapped state property. This allows you to use getters as

// don't care about the implementation, just get/set the value
store.get('items')
store.set('items', data)

While Pathify handles most wiring, there are specific scenarios where you should bypass Pathify helpers:

• Global access/Syncing: Use Pathify get(), set(), and sync().
• Non-standard mutations/actions: Use Pathify direct syntax.
• Explicit intent or Store-internal logic: Use standard Vuex dispatch() or commit() if you want to be highly explicit, or when writing logic within the store itself.
• Getter priority conflicts: Call state directly if a getter with the same name is taking priority over the state property you want to access.

Pathify is best suited for getting, setting, and syncing properties 1:1 with the Vuex store. It excels at mapping state names to Vuex members in a get/set manner.

Use cases:

• Setting and getting data.
• Syncing component properties with the store.

Limitations:

• It is less intuitive for calling non-get/set named actions or mutations (e.g., updateItems or loadItems). For these, use direct syntax or standard Vuex commit/dispatch.
• Do not use sub-property access as a crutch to avoid proper state structuring; keep application logic clear by not nesting everything under a single property.

Pathify maps paths to store members (state, getters, mutations, and actions). To generate the correct code, you must choose a naming scheme. If you use the standard scheme, no additional configuration is required.

Pathify simplifies the Vuex development experience by replacing multiple operations, helpers, and naming formats with a single unified path syntax and four core methods.

Instead of managing different syntaxes for state, getters, mutations, and actions, Pathify uses a custom path syntax (e.g., 'products/items@filters.search') that maps to store members via a configurable naming scheme. This allows you to interact with the store using a consistent set of methods regardless of whether you are reading from a getter or writing via an action.

Pathify uses a declarative, state-based path syntax to access Vuex state. This allows you to reference any module, property, or sub-property using a specific string format. This abstraction removes the need for manually-written getters, setters, and mutations for every piece of state.

// Accessing a top-level property
store.get('loaded')

// Reaching into sub-properties and arrays using '@' and '.'
store.get('products@items.0.name')
store.set('products@items.1.name', 'Vuex Pathify')