vuex-store-ts
v1.0.17
Published
#### This util provides user with type hints when using vuex, from defining to calling, with minimum boilerplate.
Downloads
7
Readme
vuex-store-ts
This util provides user with type hints when using vuex, from defining to calling, with minimum boilerplate.
Exported JavaScript contains no logics
import { useStore } from 'vuex'
export function defineSlice(namespace, _) {
return _
}
export function useAppStore() {
return useStore()
}
Install
yarn add vuex-store-ts -D
npm i vuex-store-ts -D
Example
// src/store/index.ts
import { StoreType } from 'vuex-store-ts'
import { createStore } from 'vuex'
import * as modules from './modules'
declare module 'vuex-store-ts' {
interface Modules {
(): typeof modules
}
}
export default createStore({
modules,
}) as StoreType
// src/store/modules/index.ts
export { default as user } from './user'
export { default as loading } from './loading'
// src/store/modules/user.ts
import { defineSlice, A } from 'vuex-store-ts'
declare module 'vuex-store-ts' {
interface RootState {
user: {
isLogin: boolean
}
}
}
export default defineSlice('user', {
state: {
isLogin: false,
},
mutations: {
setLogin(state, { payload }: A<boolean>) {
state.isLogin = payload
},
},
actions: {
async login({ commit }, { payload }: A<boolean>) {
commit({ type: 'loading/setLoading', payload: true })
const flag = await loginBusiness(payload)
commit({ type: 'setLogin', payload: flag })
commit({ type: 'loading/setLoading', payload: false })
},
},
})
function loginBusiness(flag: boolean) {
return new Promise<boolean>((resolve) => {
setTimeout(() => {
resolve(flag)
}, 800)
})
}
// src/store/modules/loading.ts
import { defineSlice, A } from 'vuex-store-ts'
declare module 'vuex-store-ts' {
interface RootState {
loading: {
isLoading: boolean
}
}
}
export default defineSlice('loading', {
namespaced: true,
state: {
isLoading: false,
},
mutations: {
setLoading(state, { payload: flag }: A<boolean>) {
state.isLoading = flag
},
},
})
<template>
<div>Home</div>
<pre>{{ state }}</pre>
<button @click="login">login</button>
<button @click="logout">logout</button>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useAppStore } from 'vuex-store-ts'
export default defineComponent({
name: 'Home',
setup() {
const store = useAppStore()
const state = computed(() => store.state)
const login = () => {
store.dispatch({ type: 'login', payload: true })
}
const logout = () => {
store.dispatch({ type: 'login', payload: false })
}
return {
login,
logout,
state,
}
},
})
</script>