Getting Started

Introduction

xds is a lightweight, Pinia-like state management library for Vue 3. It provides a simple Setup Store pattern with built-in persistence support and essential helpers.

Features

• 📦 Lightweight: Zero dependencies (only Vue).
• ⚡ Reactive: Built on Vue 3's Reactivity API.
• 🛠 Setup Stores: Define stores using standard Vue Composition API.
• 🔌 Pinia Compatible API: Familiar methods like $patch, $reset, $state.
• 🧩 No Boilerplate: No actions/mutations separation. Just functions.
• 🔧 TypeScript: First-class type support.

Installation

npm install xds
# or
pnpm add xds

Usage

1. Install Plugin (Recommended)

For sharing state across your app and ensuring SSR/Multi-app isolation, install the plugin:

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

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

2. Define a Store

xds uses the Setup Store pattern. You define state using ref or reactive, and actions as regular functions.

import { defineStore } from 'xds'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  // State
  const count = ref(0)
  const name = ref('Eduardo')

  // Getters
  const doubleCount = computed(() => count.value * 2)

  // Actions
  function increment() {
    count.value++
  }

  function $reset() {
    count.value = 0
  }

  return { count, name, doubleCount, increment, $reset }
})

3. Use in Component

<script setup>
import { useCounterStore } from './store'
import { storeToRefs } from 'xds'

const store = useCounterStore()

// Destructuring with reactivity
const { count, doubleCount } = storeToRefs(store)

function add() {
  store.increment()
}
</script>

<template>
  <button @click="add">Count: {{ count }} (Double: {{ doubleCount }})</button>
</template>