• Stars
    star
    111
  • Rank 314,510 (Top 7 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated 11 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Class based state management for Vue

Sinai

npm version Build Status sinai Dev Token

Type safe state management inspired by Vuex.

This library includes many type level hacks. Use at your own risk and do not use if you are unsure about the mechanism under the hood.

If you search a production ready state management solution, take a look vuex-smart-module

Requirements

  • Vue >= 2.5
  • TypeScript >= 2.8

Examples

import { store as createStore, module, Getters, Mutations, Actions } from 'sinai'

// Declare the module state and its initial value
class CounterState {
  count = 0
}

// Declare getters
class CounterGetters extends Getters<CounterState>() {
  get half () {
    return this.state.count / 2
  }
}

// Declare mutations
class CounterMutations extends Mutations<CounterState>() {
  inc () {
    this.state.count += 1
  }

  dec () {
    this.state.count -= 1
  }
}

// Declare actions
class CounterActions extends Actions<CounterState, CounterGetters, CounterMutations>() {
  asyncInc (ms: number) {
    console.log('count: ' + this.state.count)
    console.log('half: ' + this.getters.half)

    return new Promise(resolve => {
      setTimeout(() => {
        this.mutations.inc()
        resolve()
      }, ms)
    })
  }
}

// Create module by composing state/getters/mutations/actions
const counter = module({
  state: CounterState,
  getters: CounterGetters,
  mutations: CounterMutations,
  actions: CounterActions
})

// Create root module
const root = module().child('counter', counter)

// Create store
const store = createStore(root, {
  strict: process.env.NODE_ENV !== 'production'
})

// These will be all type checked
console.log(store.state.counter.count)
console.log(store.getters.counter.half)
store.actions.counter.asyncInc(1000)
store.mutations.counter.inc()

For other examples, see tests.

License

MIT

More Repositories

1

vuex-class

Binding helpers for Vuex and vue-class-component
TypeScript
1,729
star
2

vuex-smart-module

Type safe Vuex module with powerful module features
TypeScript
381
star
3

vue-designer

Vue component design tool
TypeScript
368
star
4

vue-cli-plugin-auto-routing

Automatically resolve pages and layouts routing
JavaScript
296
star
5

vue-template-loader

Vue.js 2.0 template loader for webpack
JavaScript
267
star
6

vue-auto-routing

Generate Vue Router routing automatically
TypeScript
254
star
7

vuex-connect

A binding utility for a Vue component and a Vuex store.
JavaScript
253
star
8

vue-route-generator

Vue Router route config generator
TypeScript
150
star
9

vue-range-slider

Simple slider component of Vue.js
JavaScript
129
star
10

vue-router-layout

Lightweight layout resolver for Vue Router
TypeScript
126
star
11

vue-thin-modal

Thin yet powerful modal component of Vue.js
JavaScript
124
star
12

vuetype

Generate TypeScript declaration files for .vue files
TypeScript
122
star
13

vue-typed-mixins

Type safe Vue.js mixins
JavaScript
107
star
14

vuex-type-helper

Type level helper to ensure type safety in Vuex
TypeScript
104
star
15

vuex-toast

Simple toast notification using Vuex
JavaScript
80
star
16

vuex-local

Local state management within Vuex
TypeScript
64
star
17

vue-size-provider

Declarative element size observer and provider
JavaScript
55
star
18

vuex-assert

Assertion for Vuex state
TypeScript
54
star
19

vuex-reducer

Reducer in Vuex
TypeScript
50
star
20

vue-media-loader

Enable `media` attribute on Vue SFC styles
TypeScript
47
star
21

vue-sfc-parser

Vue.js single file component parser for static analysis
TypeScript
47
star
22

ts-compiler-api-examples

A Collection of example using TypeScript Compiler API
TypeScript
45
star
23

vite-typescript-starter

Starter template for Vite + TypeScript project
Vue
42
star
24

vue-ast-explorer

Vue template AST explorer https://ktsn.github.io/vue-ast-explorer/
Vue
41
star
25

birdseye

Next generation component catalog
TypeScript
39
star
26

svelte-jest

Jest Svelte component transformer
JavaScript
37
star
27

vue-tsx

TSX hook for Vue.js
JavaScript
36
star
28

vue-vnode-helper

Helpers for Vue's createElement inspired by hyperscript-helpers
TypeScript
35
star
29

vue-svelte-adapter

Using Svelte components in Vue.js
TypeScript
32
star
30

vuex-strong-cache

Allow stronger cache for Vuex getters
TypeScript
28
star
31

vue-inversify-decorator

PoC of combining vue-class-component and Inversify together
JavaScript
26
star
32

vue-composable-tester

Utility to test composition api functions for Vue.js
TypeScript
25
star
33

eslint-plugin-vue-composable

ESLint plugin providing Vue composable related rules
TypeScript
25
star
34

css-spring-animation

Intuitive and predictable spring animation library powered by CSS Transition
TypeScript
24
star
35

vue-canvas

Declarative canvas rendering using Vue.js
TypeScript
23
star
36

calendar-set

Framework agnostic calendar components
HTML
20
star
37

vuex-mappers

Component agnostic Vuex mappers
TypeScript
19
star
38

vue-hot-reload-loader

Enable hot module replacement (HMR) on your Vue components
JavaScript
19
star
39

vq

A light-weight and functional animation helper for Velocity.js
JavaScript
19
star
40

template-vue-component

Boilerplate for standalone Vue.js components
JavaScript
16
star
41

vue-form-builder

Form builder on Vue.js
TypeScript
13
star
42

truncator

Layout specific text truncator considering line length, content height or character length.
JavaScript
12
star
43

vuec

CLI compiler of Vue single file component
TypeScript
11
star
44

capture-all

Flexible utility to get screenshots from Web pages
TypeScript
11
star
45

vue-lazy-components-option

Provide lazyComponents option for Vue components
JavaScript
10
star
46

vue-transition-components

Transition component collection of Vue.js
JavaScript
9
star
47

template-nuxt

Minimal project setup using Nuxt.js and TypeScript
JavaScript
8
star
48

vuex-modal

Simple modal component/Vuex module
JavaScript
8
star
49

typescript-webpack-simple

A simple TypeScript + Webpack + vue-loader setup.
Vue
8
star
50

typed-vue-template

Inject Vue template into TypeScript code
TypeScript
7
star
51

vue-cli-plugin-mfc

Vue CLI plugin for multiple file component projects (WIP)
JavaScript
7
star
52

babel-plugin-remove-vue-extend

Babel plugin for removing `Vue.extend` from components
TypeScript
7
star
53

safe-object-proxy

Safe property access for JavaScript objects using Proxy Object
JavaScript
7
star
54

npm-package-example

Example of npm package
JavaScript
6
star
55

learning-typescript

Personal notes to learn TypeScript
6
star
56

lens-proxy

PoC of Proxy implementation of Lens.ts
TypeScript
5
star
57

mirror-tube

The Google Chrome extention that mirrors a YouTube video
JavaScript
5
star
58

hawkeye

Intuitive tab manager for Google Chrome
TypeScript
5
star
59

template-vue

A project template for Vue.js applications
JavaScript
5
star
60

vue-template-diagnostic

Diagnostic for expressions of Vue.js templates
TypeScript
5
star
61

ktsn.art

TypeScript
4
star
62

template-ts

A project template for a TypeScript library
JavaScript
4
star
63

markdown-it-demo-renderer

markdown-it renderer to render live demo over each code block fence
TypeScript
3
star
64

vue-rubberband

Rubberband component of Vue.js
JavaScript
3
star
65

bs-compile-middleware

Compilation middleware for Browsersync
JavaScript
3
star
66

meck

Small and type safe message bus with well module separation
TypeScript
3
star
67

typed-vue-loader

Typed Vue template loader
Vue
2
star
68

vti-demo

Vetur Terminal Interface Demo
Vue
2
star
69

vuex-first-router

PoC of redux-first-router for Vuex and Vue Router
TypeScript
2
star
70

float-behind-client

HTML
2
star
71

vue-loader-custom-block-repro

A reproduction of vue-loader issue
JavaScript
2
star
72

float-behind-lp

The landing page for floatbehind (https://github.com/ktsn/float-behind)
HTML
2
star
73

template-es6

A project template for an ES6 library
JavaScript
2
star
74

selective-undo-text

A Selective Undo library for text editing
TypeScript
1
star
75

vue-deps-perf-demo

JavaScript
1
star
76

template-node-ts

A project template for a Node.js library using TypeScript
JavaScript
1
star
77

.github

1
star
78

jest-config-ktsn

Personal Jest configuration
JavaScript
1
star
79

vue-svg-loader-test

Vue
1
star
80

flip-our-animations

Implementations of FLIP animation for various libraries
JavaScript
1
star
81

ob

A tiny and extensible FRP library
TypeScript
1
star
82

float-behind

Updates chat information automatically behind your desktop
JavaScript
1
star
83

k-css

Reset CSS for easier custom styling
HTML
1
star
84

eslint-config-ktsn-vue

ESLint config for Vue.js project
JavaScript
1
star
85

nuxt-page-transition-example

Page transition example for Nuxt.js https://ktsn.github.io/nuxt-page-transition-example/
Vue
1
star
86

nuxt-scroll-behavior-repro

Reproduction of nuxt scroll behavior issue
Vue
1
star
87

vue-mutation-store

Vuex and Redux inspired MVVM approach for Vue.js. (experimental)
TypeScript
1
star
88

vue-comm

An experiment of Vue.js type safety
TypeScript
1
star
89

vue-custom-properties

Make easier to use CSS custom properties in Vue components
TypeScript
1
star
90

template-node

A project template for Node.js libraries
JavaScript
1
star