PathStore Pinia Plugin brings PathStore's API to Pinia (opens new window).

All methods from PathStore's API are registered as Pinia actions.

This way you get a simplified overall Pinia development experience, while still having basic devtools monitoring.

Installation

Basic

Download the repo, extract pathStorePiniaPlugin.min.js out of the dist/umd folder and insert it in your page.

<script type="text/javascript" src="pathStorePiniaPlugin.min.js"></script>

Module System

Install it via npm

npm i vue-path-store

Use the import statement to include it into your js

import { pathStorePiniaPlugin } from 'vue-path-store/dist/es/pathStorePiniaPlugin.js'

Usage

PathStore Pinia Plugin is registered like any other Pinia plugin.

// main.js
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api' // Only needed for Vue < v2.7
import { PiniaVuePlugin, createPinia } from 'pinia'
import { pathStorePiniaPlugin } from './modules/path_store/pathStorePiniaPlugin'

Vue.use(VueCompositionApi) // Only needed for Vue < v2.7
Vue.use(PiniaVuePlugin)

const pinia = createPinia()
pinia.use(pathStorePiniaPlugin)

new Vue({
  el: '#app',
  pinia
})

// store.js
import { defineStore } from 'pinia'

export const usePiniaStore = defineStore({
  id: 'pinia',
  state() {
    return {
      message: ''
    }
  }
})

Using it inside components

<template>
  <div>
    {{ $store.message }}
    <button @click="$store.set('message', 'New message')">Set message</button>
  </div>
</template>

<script>
import { usePiniaStore } from './store.js'

export default {
  setup() {
    const $store = usePiniaStore()

    return {
      $store
    }
  }
}
</script>