PathStore is a simple, lightweight, shared state management solution for Vue.
At its heart lays a simple reactive store, which uses the dot notation path syntax for data mutation.

It also comes with:

• a Vuex plugin so that you can use dot notation along with the full power of Vuex (actions, getters, modules, devtools) as well.

• a Pinia plugin so that you can use dot notation with your favorite fruity store.

Features

• Lightweight, minified gzip size is < 1.5kb
• Share state easily between components using either the object or composition API
• Use dot (or bracket) notation for mutating state (set, delete)
• Creates intermediate reactive object/array structures if not available while setting state
• Avoid Vue change detection caveats (opens new window)
• Extra methods for Array manipulation
• Enhance Vuex with dot notation by utilizing the PathStore Vuex Plugin
• Enhance Pinia with dot notation by utilizing the PathStore Pinia Plugin

Browsers support

(opens new window) IE / Edge	(opens new window) Firefox	(opens new window) Chrome	(opens new window) Safari	(opens new window) Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Quick shared state example

import Vue from 'vue'
import { createPathStore } from 'vue-path-store'

// Initialize the store and provide it to all components
Vue.prototype.$ps = createPathStore({
  state: {}
})

Component 1

Component 2