ktsn / Vuex Type Helper
Type level helper to ensure type safety in Vuex
Stars: ✭ 99
Programming Languages
typescript
32286 projects
type
21 projects
Labels
Projects that are alternatives of or similar to Vuex Type Helper
Vuex Smart Module
Type safe Vuex module with powerful module features
Stars: ✭ 306 (+209.09%)
Mutual labels: type-safety, vuex
Generic Json Swift
A simple Swift library for working with generic JSON structures
Stars: ✭ 95 (-4.04%)
Mutual labels: type-safety
Vuex Simple Structure
📈 A repository showcasing a simple Vuex store inside a Vue.js application based on Large-scale Vuex application structures @3yourmind
Stars: ✭ 87 (-12.12%)
Mutual labels: vuex
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+1215.15%)
Mutual labels: vuex
Vue Memo
Using Vue.js for memo web App. webpack, vuex, vue-router, Firebase.
Stars: ✭ 88 (-11.11%)
Mutual labels: vuex
Vue Music163
A webapp what base Vue2.0 contains seaching and playing music
Stars: ✭ 91 (-8.08%)
Mutual labels: vuex
Boilerplate Vue Apollo Graphql Mongodb
Start your magical stack journey!
Stars: ✭ 85 (-14.14%)
Mutual labels: vuex
Vue Boilerplate
Vue 2.0 boilerplate,based on webpack and es6,includes vuex,vue-router,vue-resource, vuelidate
Stars: ✭ 94 (-5.05%)
Mutual labels: vuex
Ohmo Vue
这是一个完全由 Vue 全家桶来实现的轻博客应用,应用了Vuex对所有状态数据进行管理并优化整体结构,后端应用Node.js开发的全栈应用,由LeanCloud提供数据存储服务。
Stars: ✭ 90 (-9.09%)
Mutual labels: vuex
Running Time
Sample Single Page Application using Laravel & Vue.js + Vuex + Vue-Router
Stars: ✭ 90 (-9.09%)
Mutual labels: vuex
Xyy Vue
🎨基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
Stars: ✭ 1,316 (+1229.29%)
Mutual labels: vuex
Vuex Pathify
Vue / Vuex plugin providing a unified path syntax to Vuex stores
Stars: ✭ 1,281 (+1193.94%)
Mutual labels: vuex
Vueaspnetcore2webapiauth
Sample project demonstrating jwt-based authentication with an Vue.js (v2.5.13) frontend and ASP.NET Core 2 WebApi. Includes both local user registration with .NET Core Identity membership and facebook login scenarios.
Stars: ✭ 96 (-3.03%)
Mutual labels: vuex
Spala
Spala (SPA LARAVEL): a modern lightweight CMS for Laravel and Vue developers (open source project).
Stars: ✭ 91 (-8.08%)
Mutual labels: vuex
Undictify
Python library providing type-checked function calls at runtime
Stars: ✭ 97 (-2.02%)
Mutual labels: type-safety
Vuex Type Helper
Type level helper to ensure type safety in Vuex.
Installation
# npm
$ npm install vuex-type-helper
# yarn
$ yarn add vuex-type-helper
Example
import * as Vuex from 'vuex'
import { DefineGetters, DefineMutations, DefineActions, Dispatcher, Committer } from 'vuex-type-helper'
/**
* Declare module types
*/
export interface CounterState {
count: number
}
export interface CounterGetters {
// getterName: returnType
half: number
}
export interface CounterMutations {
// mutationName: mutationPayloadType
inc: {
amount: number
}
reset: void // having no payload
}
export interface CounterActions {
// actionName: actionPayloadType
incAsync: {
amount: number
delay: number
}
reset: void // having no payload
}
/**
* Implement the module
*/
const state: CounterState = {
count: 0
}
const getters: DefineGetters<CounterGetters, CounterState> = {
half: state => state.count / 2
}
const mutations: DefineMutations<CounterMutations, CounterState> = {
inc (state, { amount }) {
state.count += amount
},
reset(state) {
state.count = 0
}
}
const actions: DefineActions<CounterActions, CounterState, CounterMutations, CounterGetters> = {
incAsync ({ commit }, payload) {
setTimeout(() => {
commit('inc', payload)
}, payload.delay)
},
reset({ commit }) {
commit('reset')
}
}
/**
* Create a store as same as the ordinary way
*/
const store = new Vuex.Store({
state,
getters,
mutations,
actions
})
/**
* Annotate dispatch/commit type with declared actions/mutations type
*/
store.dispatch<Dispatcher<CounterActions>>({
type: 'incAsync',
amount: 1,
delay: 1000
})
store.dispatch<Dispatcher<CounterActions>>({
type: 'reset'
})
store.commit<Committer<CounterMutations>>({
type: 'inc',
amount: 1
})
store.commit<Committer<CounterMutations>>({
type: 'reset'
})
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].