Counter Example

This example demonstrates the basic usage of xds, including state, getters, actions, and store resetting.

Counter

Count: 0

Double Count: 0

List: []

User Info

Name: Vue User

Role: developer

Todos

Source Code

Store Definition

store.tsCounterExample.vue

typescript

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

export const useCounterStore = defineStore('counter-example', () => {
  const count = ref(0)

  const user = ref({
    name: 'Vue User',
    role: 'developer',
  })

  const state = reactive({
    count: 0,
    list: [] as number[],
  })

  const todos = reactive([] as string[])

  const doubleCount = computed(() => state.count * 2)

  function increment() {
    state.count++
    state.list.push(state.count)
  }

  function decrement() {
    state.count--
    state.list.pop()
  }

  function $reset() {
    state.count = 0
    state.list = []
    count.value = 0
  }

  return {
    count,
    user,
    state,
    todos,
    doubleCount,
    increment,
    decrement,
    $reset,
  }
})

Component

vue

<script setup lang="ts">
import { useCounterStore } from './store'

const store = useCounterStore()

const updateName = (e: Event) => {
  const target = e.target as HTMLInputElement
  store.user.name = target.value
}

const addTodo = () => {
  const todo = `Task ${store.todos.length + 1}`
  store.todos.push(todo)
}
</script>

<template>
  <div class="demo-container">
    <div class="card">
      <h3>Counter</h3>
      <p>Count: {{ store.state.count }}</p>
      <p>Double Count: {{ store.doubleCount }}</p>
      <p>List: {{ store.state.list }}</p>
      <div class="actions">
        <button @click="store.increment">+</button>
        <button @click="store.decrement">-</button>
        <button @click="store.$reset">Reset</button>
      </div>
    </div>
    <!-- ... -->
  </div>
</template>

Counter Example ​