sinai
TypeScript icon, indicating that this package has built-in type declarations

0.5.1 • Public • Published

Sinai

Class based state management for Vue.

Examples

import { defineStore } from 'sinai'

// Declare a store with class syntax
class CounterState {
  // Properties will be reactive value
  count = 0

  // Getters will be computed property
  get half(): number {
    return this.count / 2
  }

  inc(): void {
    this.count += 1
  }

  dec(): void {
    this.count -= 1
  }
}

// Create composable with defineStore function
export const useCounter = defineStore(CounterState)
import { createApp } from 'vue'
import { createSinai } from '../src'
import App from './components/App.vue'

// Create Sinai instance
const sinai = createSinai()

// Install Sinai instance to Vue app
createApp(App).use(sinai).mount('#app')
<script setup lang="ts">
import { useCounter } from '../store/counter'

const counter = useCounter()
</script>

<template>
  <button @click="counter.dec">-</button>
  <span>{{ counter.count }}</span>
  <button @click="counter.inc">+</button>
</template>

For other examples, see tests.

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i sinai

Weekly Downloads

7

Version

0.5.1

License

MIT

Unpacked Size

21.3 kB

Total Files

18

Last publish

Collaborators

  • ktsn