Integration methods of state management libraries

Integration Methods for State Management Libraries

State management libraries play a crucial role in frontend development, and Vue 3 offers multiple integration approaches. From simple provide/inject to specialized libraries like Pinia, each method has its applicable scenarios and implementation details.

Built-in State Management in Vue 3

Vue 3's reactivity system itself can serve as a lightweight state management tool. States created with reactive and ref can be shared between components:

// store.js
import { reactive } from 'vue'

export const store = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

When used in components:

import { store } from './store'

export default {
  setup() {
    return { store }
  }
}

This method is straightforward but can face challenges in tracking state in large applications.

Provide/Inject Pattern

Vue 3's provide/inject API enables cross-level state sharing:

// App.vue
import { provide, reactive } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  setup() {
    const state = reactive({ count: 0 })
    provide('sharedState', state)
    
    return { state }
  },
  components: { ChildComponent }
}

Child components retrieve the state via inject:

// ChildComponent.vue
import { inject } from 'vue'

export default {
  setup() {
    const state = inject('sharedState')
    
    return { state }
  }
}

This pattern is suitable for scenarios with deep component hierarchies but simple state structures.

Vuex 4 Integration

Vuex 4 is designed specifically for Vue 3, retaining the classic state management pattern:

// store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

Installation in main.js:

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

Usage in components:

import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    
    return {
      count: computed(() => store.state.count),
      increment: () => store.commit('increment')
    }
  }
}

Pinia Integration

Pinia is the recommended state management library for Vue 3, offering a more concise API:

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

Installing Pinia:

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

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

Usage in components:

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()
    
    return {
      count: computed(() => counter.count),
      increment: counter.increment
    }
  }
}

Composition Function State Management

Using the Composition API, reusable state logic can be created:

// composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter() {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  return { count, double, increment }
}

Usage in components:

import { useCounter } from '@/composables/useCounter'

export default {
  setup() {
    const { count, double, increment } = useCounter()
    
    return { count, double, increment }
  }
}

Service Class Pattern

For complex business logic, an object-oriented approach can be adopted:

// services/CartService.js
import { reactive } from 'vue'

class CartService {
  constructor() {
    this.state = reactive({
      items: [],
      total: 0
    })
  }
  
  addItem(item) {
    this.state.items.push(item)
    this.updateTotal()
  }
  
  updateTotal() {
    this.state.total = this.state.items.reduce((sum, item) => sum + item.price, 0)
  }
}

export const cartService = new CartService()

Using the service instance in components:

import { cartService } from '@/services/CartService'

export default {
  setup() {
    return {
      cart: cartService.state,
      addItem: cartService.addItem
    }
  }
}

Reactive API and State Management

Vue 3's reactive API provides foundational support for state management:

import { reactive, readonly } from 'vue'

const state = reactive({
  user: null,
  settings: {}
})

// Expose read-only state externally
export const store = readonly(state)

// Modification methods
export function login(user) {
  state.user = user
}

This pattern combines mutable internal state with immutable external access, enhancing state management security.

State Persistence Integration

State persistence is often required in real-world applications:

// Using Pinia plugin for persistence
import { PiniaPluginContext } from 'pinia'

function persistStore({ store }) {
  const key = `pinia-${store.$id}`
  
  // Restore from local storage
  const persisted = localStorage.getItem(key)
  if (persisted) {
    store.$patch(JSON.parse(persisted))
  }
  
  // Subscribe to changes
  store.$subscribe((mutation, state) => {
    localStorage.setItem(key, JSON.stringify(state))
  })
}

// Installing the plugin
const pinia = createPinia()
pinia.use(persistStore)

Modular State Management

Large applications require modular state management:

// Pinia modular example
// stores/user.js
export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    isAdmin: false
  })
})

// stores/products.js
export const useProductStore = defineStore('products', {
  state: () => ({
    items: []
  })
})

Combining multiple stores:

import { useUserStore } from '@/stores/user'
import { useProductStore } from '@/stores/products'

export default {
  setup() {
    const user = useUserStore()
    const products = useProductStore()
    
    return { user, products }
  }
}

State Testing Strategies

State management library testing requires consideration of different scenarios:

// Testing Pinia store
import { setActivePinia, createPinia } from 'pinia'
import { useCounterStore } from '@/stores/counter'

describe('Counter Store', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })
  
  it('increments count', () => {
    const counter = useCounterStore()
    expect(counter.count).toBe(0)
    counter.increment()
    expect(counter.count).toBe(1)
  })
})

Performance Optimization Considerations

State management requires attention to performance:

// Avoid unnecessary reactive conversions
import { shallowRef } from 'vue'

const largeList = shallowRef([]) // Internal element changes won't trigger reactivity

// Use markRaw to skip reactive processing
import { markRaw } from 'vue'

const heavyObject = markRaw({
  // Large immutable data
})

TypeScript Integration

Type-safe state management:

// Pinia + TypeScript
interface UserState {
  name: string
  age: number
  isAdmin: boolean
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    name: '',
    age: 0,
    isAdmin: false
  }),
  actions: {
    setName(name: string) {
      this.name = name
    }
  }
})

State Sharing Strategies

Cross-application state sharing solutions:

// Using BroadcastChannel API
const channel = new BroadcastChannel('app_state')

// Send state updates
function sendUpdate(state) {
  channel.postMessage({
    type: 'STATE_UPDATE',
    payload: state
  })
}

// Receive state updates
channel.onmessage = (event) => {
  if (event.data.type === 'STATE_UPDATE') {
    store.$patch(event.data.payload)
  }
}

State Version Migration

Handling state structure changes:

// Versioned state migration
function migrateState(oldState) {
  const version = oldState._version || 0
  
  switch(version) {
    case 0:
      // Migration from v0 to v1
      return {
        ...oldState,
        newField: 'default',
        _version: 1
      }
    case 1:
      // Migration from v1 to v2
      return {
        ...oldState,
        renamedField: oldState.oldField,
        _version: 2
      }
    default:
      return oldState
  }
}

State Debugging Tools

State debugging solutions during development:

// Custom Pinia plugin to log state changes
function debugPlugin({ store }) {
  store.$subscribe((mutation, state) => {
    console.log(`[${mutation.storeId}] change:`, mutation.type, state)
  })
  
  store.$onAction(({ name, store, args, after, onError }) => {
    console.log(`Action started: ${name}`)
    after((result) => {
      console.log(`Action finished: ${name}`)
    })
    onError((error) => {
      console.log(`Action error: ${name}`, error)
    })
  })
}

Server-Side Rendering Integration

State management considerations in SSR:

// Nuxt 3 + Pinia example
// ~/stores/index.ts
export const useMainStore = defineStore('main', {
  state: () => ({
    serverSideData: null
  }),
  actions: {
    async fetchData() {
      this.serverSideData = await $fetch('/api/data')
    }
  }
})

// In components
const store = useMainStore()
if (process.server) {
  await store.fetchData() // Fetch data on the server
}

Micro-Frontend State Sharing

Cross-micro-application state management solutions:

// Using CustomEvent for cross-application communication
window.dispatchEvent(new CustomEvent('global-state-update', {
  detail: {
    key: 'user',
    value: currentUser
  }
}))

// Other applications listen
window.addEventListener('global-state-update', (event) => {
  sharedState[event.detail.key] = event.detail.value
})

State Snapshots and Time Travel

Implementing state rollback functionality:

// State history management
const stateHistory = []
const HISTORY_LIMIT = 50

function saveSnapshot(state) {
  stateHistory.push(JSON.parse(JSON.stringify(state)))
  if (stateHistory.length > HISTORY_LIMIT) {
    stateHistory.shift()
  }
}

function undo() {
  if (stateHistory.length > 1) {
    stateHistory.pop() // Remove current state
    const prevState = stateHistory[stateHistory.length - 1]
    store.$patch(prevState)
  }
}

State Dependency Injection

Dynamic state injection solutions:

// Factory function to create stores
function createDynamicStore(options) {
  return defineStore({
    id: options.id,
    state: () => options.initialState,
    actions: options.actions
  })
}

// Usage
const useCustomStore = createDynamicStore({
  id: 'dynamic',
  initialState: { value: 0 },
  actions: {
    increment() { this.value++ }
  }
})