---
title: 'Dot Path Mutations'
url: 'https://www.twelvetone.tv/docs/developer-tools/vue-plugins/dot-path-mutations'
markdown: 'https://www.twelvetone.tv/docs/developer-tools/vue-plugins/dot-path-mutations.md'
date: '2026-09-25'
description: 'DotPathMutations is a plugin for Vue that adds Vuex mutations and methods for modifying paths within a data store.'
taxonomy:
  category:
    - docs
  devtype:
    - beta
---

[](#)  [ Home ](https://www.twelvetone.tv/docs/)     [ Developer Tools ](https://www.twelvetone.tv/docs/developer-tools)     [ Vue Plugins ](https://www.twelvetone.tv/docs/developer-tools/vue-plugins)      Dot Path Mutations    

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.

#### Table of Contents

- [Describing Paths](#describing-paths)
- [PathInfo Actions](#pathinfo-actions)
    - [replace(newValue)](#replace-newvalue)
    - [delete()](#delete)
    - [get()](#get)
- [Component Methods](#component-methods)
    - [$dp.cmd(method, dotpath, value)](#dp-cmd-method-dotpath-val)
    - [$dp.set(dotpath:String, value:Any)$dp.set({path1:value1, path2:value2})](#dp-set-dotpath-string-val)
    - [$dp.get(dotpath, opts)](#dp-get-dotpath-opts)
    - [$dp.delete(dotpath)](#dp-delete-dotpath)
    - [$dp.toggle(dotpath)](#dp-toggle-dotpath)
    - [$dp.increment(dotpath)](#dp-increment-dotpath)
    - [$dp.decrement(dotpath)](#dp-decrement-dotpath)
- [Vue Methods](#vue-methods)
    - [$dp.cmd(store, method, dotpath, value)](#dp-cmd-store-method-dotpa)
    - [$dp.set(store, dotpath, value)](#dp-set-store-dotpath-valu)
    - [$dp.get(store, dotpath, opts)](#dp-get-store-dotpath-opts)
    - [$dp.delete(store, dotpath)](#dp-delete-store-dotpath)
    - [$db.toggle(store, dotpath)](#db-toggle-store-dotpath)
    - [$db.increment(store, dotpath)](#db-increment-store-dotpat)
    - [$db.decrement(store, dotpath)](#db-decrement-store-dotpat)
- [Commands](#commands)
    - [path.set](#path-set)
    - [path.clear](#path-clear)
    - [path.delete](#path-delete)
    - [path.toggle](#path-toggle)
    - [path.increment](#path-increment)
    - [path.decrement](#path-decrement)
    - [path.list.replace](#path-list-replace)
    - [path.list.move](#path-list-move)
    - [path.list.add](#path-list-add)
    - [path.list.insert](#path-list-insert)
    - [path.list.remove](#path-list-remove)
- [Command Usage](#command-usage)
- [Binding](#binding)
- [Issues](#issues)
    - [Setting An Undefined Property At The State Path](#setting-an-undefined-prop)

# Describing Paths

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`.

```js
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.

```js
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.

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

# PathInfo Actions

## replace(newValue)

Replaces the field with the newValue.

## delete()

Removes the field by calling `delete` on the parent.

## get()

Returns the field. Same as using pathInfo.field.

# Component Methods

Several convenience methods are added to all component instances.

## $dp.cmd(method, dotpath, value)

Calls the method in the store.

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

## $dp.set(dotpath:String, value:Any)
$dp.set({path1:value1, path2:value2})

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

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

## $dp.get(dotpath, opts)

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

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

## $dp.delete(dotpath)

Deletes a value from it's parent.

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

## $dp.toggle(dotpath)

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

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

## $dp.increment(dotpath)

Increments a value. Returns the new value.

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

## $dp.decrement(dotpath)

Decrements a value. Returns the new value.

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

# Vue Methods

Methods added to the Vue instance. See [Component Methods](#component-methods) for details on these methods.

## $dp.cmd(store, method, dotpath, value)

## $dp.set(store, dotpath, value)

## $dp.get(store, dotpath, opts)

## $dp.delete(store, dotpath)

## $db.toggle(store, dotpath)

## $db.increment(store, dotpath)

## $db.decrement(store, dotpath)

# Commands

Several mutations are added to the store.

## path.set

Sets the field at the specified path.

## path.clear

Resets the field at the specified path.

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

## path.delete

Deletes an object. Vue will no longer track the state

## path.toggle

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

## path.increment

Increments a value. Returns the new value.

## path.decrement

Decrements a value. Returns the new value.

## path.list.replace

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

## path.list.move

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

One of (index | amount) is required.

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

## path.list.add

Adds a list item at the end of a list.

## path.list.insert

Adds a list item at a specified index.

## path.list.remove

Removes a list item by value or index.

# Command Usage

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

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

```js
this.$store.commit(
  'path.clear',
  {
    path:'user.name'
  }
);
```

# Binding

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.

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

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

```js
import {dp_bind} from "DotPathPlugin";

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

# Issues

## Setting An Undefined Property At The State Path

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.

---

## Navigation

- Parent: [Vue Plugins](https://www.twelvetone.tv/docs/developer-tools/vue-plugins.md)
- Next: [window-plugin](https://www.twelvetone.tv/docs/developer-tools/vue-plugins/windowplugin.md)