Store-to-store interaction in Vue

Introduction

Store-to-store interaction helps different parts of your app share and update data easily.

When you want one store to update data in another store.

When multiple stores need to stay in sync with shared information.

When you want to keep your app organized by separating concerns into different stores.

When you want to reuse logic from one store inside another.

When you want to trigger actions in one store based on changes in another.

Syntax

Vue

import { defineStore } from 'pinia'

// Store A
export const useStoreA = defineStore('storeA', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// Store B
import { useStoreA } from './storeA'
export const useStoreB = defineStore('storeB', {
  actions: {
    incrementStoreA() {
      const storeA = useStoreA()
      storeA.increment()
    }
  }
})

Use useStoreA() inside another store to access its state and actions.

This pattern keeps stores independent but able to communicate.

Examples

Store A holds a message and can update it.

Vue

import { defineStore } from 'pinia'

export const useStoreA = defineStore('storeA', {
  state: () => ({ message: 'Hello' }),
  actions: {
    updateMessage(newMsg) {
      this.message = newMsg
    }
  }
})

Store B calls Store A's action to change its message.

Vue

import { defineStore } from 'pinia'
import { useStoreA } from './storeA'

export const useStoreB = defineStore('storeB', {
  actions: {
    changeMessageInStoreA() {
      const storeA = useStoreA()
      storeA.updateMessage('Hi from Store B')
    }
  }
})

Sample Program

This example shows Store B calling Store A's increment action. Clicking the button increases Store A's count.

Vue

import { createApp } from 'vue'
import { createPinia, defineStore } from 'pinia'

// Store A
export const useStoreA = defineStore('storeA', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// Store B
import { useStoreA } from './storeA'
export const useStoreB = defineStore('storeB', {
  actions: {
    incrementStoreA() {
      const storeA = useStoreA()
      storeA.increment()
    }
  }
})

// Vue component
const App = {
  template: `
    <div>
      <p>Store A count: {{ storeA.count }}</p>
      <button @click="storeB.incrementStoreA">Increment Store A from Store B</button>
    </div>
  `,
  setup() {
    const storeA = useStoreA()
    const storeB = useStoreB()
    return { storeA, storeB }
  }
}

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

Important Notes

Always import the store you want to interact with inside another store.

Calling one store's action from another keeps your code clean and modular.

Make sure to use Pinia's useStore() functions inside setup or actions, not outside component setup.

Summary

Store-to-store interaction lets stores share and update data.

Use one store's useStore() inside another to call its actions or access state.

This helps keep your app organized and your data consistent.