This product is in beta state.
It is available to registered beta testers only.

DotPathMutations is a plugin for Vue that adds Vuex mutations and methods for modifying paths within a data store.

Let's start with how to describe a path into a Javascript object and arrays.

A path uses dots to traverse objects and arrays within a Javascript object. Arrays can be traversed using braces foo[2] or dots foo.2.

const state = {
  o1: {
    o2: {
      ar: [
        "hello",
        { foo: 'bar' }
      ]
    }
  }
}

To get the value of foo, we would use the path o1.o2.ar.1.foo

The path object returned from resolvePath contains the field, the parent object or array, the fieldname, and an array of path names used to traverse the object. This allows us to get, set, replace, or remove the resolved item. resolvePath will return undefined if the path is not found.

const info = resolvePath(state, 'o1.o2.ar.1.foo')
console.log(info.value)

To use ., [, ], or \ inside a property name, you will need to escape using \ in your query.

// This will resolve to state['mr.dot']['odd[name']
const info = resolvePath(state, 'mr\\.dot.odd\\[name')

Replaces the field with the newValue.

Removes the field by calling delete on the parent.

Returns the field. Same as using pathInfo.field.

Several convenience methods are added to all component instances.

Calls the method in the store.

this.$dp.cmd('path.set', 'foo.bar', true)
this.$dp.cmd('path.toggle', 'foo.bar')

Sets the path to the supplied value. An object can also be used instead of a string path to set multiple values at once.

this.$dp.set('foo.bar', true)
this.$dp.set({'foo.bar':true})

Returns the value of a path.
opts.default: If the path is not found, or the value is undefined, return this value instead.

this.$dp.get('foo.bar')
this.$dp.get('foo.bar', {default:'not found'})

Deletes a value from it's parent.

this.$dp.delete('foo.bar')

Toggles a value from truthy to false or falsey to true. Returns the new value.

this.$dp.toggle('foo.bar')

Increments a value. Returns the new value.

this.$dp.increment('foo.aNumber')

Decrements a value. Returns the new value.

this.$dp.increment('foo.aNumber')

Methods added to the Vue instance. See Component Methods for details on these methods.

Several mutations are added to the store.

Sets the field at the specified path.

Resets the field at the specified path.

Type Value
number 0
string '' (empty string)
boolean false
list empty (empty list)
object null

Deletes an object. Vue will no longer track the state

Toggles a value. Truthy values will become falsey, and vice-versa. Undefined values are falsey will become true. Returns the new value.

Increments a value. Returns the new value.

Decrements a value. Returns the new value.

Replaces an item in a list with another item. The target item can be specified by item or index.

Moves an item in a list to an absolute or relative index.

One of (index | amount) is required.

{
  path: 'foo.bar' // required,
  item: theItem // required,
  index: 'first|last|<new-index>', // optional
  amount: offset // optional
}

Adds a list item at the end of a list.

Adds a list item at a specified index.

Removes a list item by value or index.

All mutations take an object as the payload. The path field is required. Each command has individual required and optional parameters.

this.$store.commit(
  'path.set',
  {
    path: 'user.name',
    value: 'Steven'
  }
);
this.$store.commit(
  'path.clear',
  {
    path:'user.name'
  }
);

The dp_bind function can 2-way bind a dotpath in your store to a Vue component via a computed property.

This example will bind the text component with the foo.bar store value via theValue computed property.

In your template, bind using the conventional v-model syntax.

<v-text v-model='theValue' />

In your script, insert the generated methods into your computed section using the es6 spread operator.

import {dp_bind} from "DotPathPlugin";

computed: {
    ...dp_bind({theValue:'foo.bar'})
}

When the Vuex state does not contain a value, or contains an undefined value for a dotpath, the property will be set using the proper reactive binding method from Vue.

A warning will be generated the first time the property is modified.

Use null instead of undefined for default values to prevent warnings.