You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

vuex-pathify

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vuex-pathify

Ridiculously simple Vuex setup + wiring


Version published
Maintainers
1
Created

Readme

Source

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

Pathify's aim is to simplify the overall Vuex development experience by abstracting away Vuex's complex setup and reliance on manually-written code. The path syntax does the heavy-lifting, with a small set of helper functions used to directly access or wire up components to the store.

Examples

Pathify Version 3.x works with Vue 3. For Vue 2, see the 1.x branch

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

store.get('loaded')
store.set('loaded', true)

Reach into sub-properties and arrays:

store.get('products@items.0.name')
store.set('products@items.1.name', 'Vuex Pathify')

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

setup () {
  return {
    products: get('products'),
    category: sync('filters@category')
  }
}

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

setup () {
  return {
    ...sync('filters@sort', [
      'order', 
      'key'
    ]),
  
    ...sync('filters@sort', {
      sortOrder: 'order',
      sortKey: 'key'
    }),
  
    ...sync('filters@sort.*')
  }
}

Use variable expansion to dynamically reference store properties:

setup () {
  return {
    product: get('products@items:index')
  }
}

Set up mutations – including sub-property mutations – in a single line:

make.mutations(state)

Results

In practical terms, Pathify results in:

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

The code comparison demo demonstrates reductions in lines of code of between 2 and 14 times (or more) depending on store size and setup.

To see the principles behind such radical code reduction, check out the Pathify 101.

Next steps

Get started:

Vue 3 demo:

Vue 2 demos:

Keywords

FAQs

Package last updated on 18 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc