vuex-typed

This is a typed vuex.

Motive

1. Provide comprehensive type hints

Comprehensive type hints include sufficient type hints for the function parameters of mutations, actions, and getters when defining Modules and Stores. It also includes providing optional values for parameters when using mapX functions, and ensuring that components can correctly identify the types of imported data and methods when using mapX functions within components.

2. Simplify migration process as much as possible

I do not want to introduce too many changes to the original project by incorporating this project. This is why I chose not to use pinia to refactor the project. This project only introduces two new methods, defineModule and defineStore, as wrappers in order to obtain correct type inference.

3. Do not change vuex behavior

This project only covers default vuex types. Even if there are errors in types, it will not cause any abnormal behavior in vuex. This ensures that adding types to vuex will not have any side effects.

Install

1npm install z-vuex-typed

Usage

1. add a defineModule function to get type of module

1// src/store/modules/user.js
2import { defineModule } from 'z-vuex-typed'
3
4const userModule = defineModule({
5  state: {
6    name: 'John',
7  },
8  mutaions: {
9    SET_NAME(state, /** @type {string} */payload) {
10      //      ^ type of `state` is `{name: string}`
11      state.name = payload
12    },
13  },
14  actions: {
15    async setName({ commit }, /** @type {string} */ payload) {
16      commit('SET_NAME', await getUserById(payload))
17      //  ^ commit type and `payload` type are specific
18    },
19  },
20  getters: {
21    usernam: state => state.name
22    //  ^ the return type is `string`
23  }
24})
25
26export default userModule

2. add a defineStore function to hook the types of store and mapX functions.

1// vue2
2// src/store/index.js
3import Vue from 'vue'
4import { defineStore } from 'z-vuex-typed'
5import user from './modules/usre'
6
7const {
8  store,
9  mapState,
10  mapMutations,
11  mapActions,
12  mapGetters,
13} = defineStore({
14  modules: {
15    user
16  },
17  getters: {
18    gUsername: state => state.user.name
19    //  ^  type of state is specific
20  }
21}, Vue)
22//  ^ need pass Vue instance to `defineStore` function
23
24export default store
25export {
26  mapState,
27  mapMutations,
28  mapActions,
29  mapGetters,
30}

1// vue3
2// src/store/index.js
3import { defineStore } from 'z-vuex-typed'
4import user from './modules/usre'
5
6const {
7  store,
8  mapState,
9  mapMutations,
10  mapActions,
11  mapGetters,
12} = defineStore({
13  modules: {
14    user
15  },
16  getters: {
17    gUsername: state => state.user.name
18    //  ^  type of state is specific
19  }
20})
21
22export default store
23export {
24  mapState,
25  mapMutations,
26  mapActions,
27  mapGetters,
28}

3. install the store

First, if you using vue2 + vuex, you need patch vuex.

More info check vuex patch and package.json

And then, change store type declare .

1// vue2
2// src/shims-vuex.d.ts
3import Vue, { ComponentOptions } from 'vue'
4import store from '@/store'
5
6declare module 'vue/types/options' {
7  interface ComponentOptions<V extends Vue> {
8    store?: typeof store
9  }
10}
11
12declare module 'vue/types/vue' {
13  interface Vue {
14    $store: typeof store
15  }
16}

1// vue3
2// src/shims-vuex.d.ts
3import { ComponentCustomOptions, ComponentCustomProperties } from 'vue'
4import store from '@/store'
5
6declare module '@vue/runtime-core' {
7  interface ComponentCustomOptions {
8    store?: typeof store
9  }
10  interface ComponentCustomProperties {
11    $store: typeof store
12  }
13}

Then, install as usual.

1// vue2
2// main.js
3import App from './App.vue'
4import store from '@/store'
5
6const app = new Vue({
7  store,
8  render: h => h(App)
9})

1// vue3
2// main.js
3import App from './App.vue'
4import store from '@/store'
5
6const app = createApp(App)
7app.use(store)

4. use mapX

1<script>
2import { defineComponent } from 'vue'
3import {
4  mapActions,
5  mapGetters,
6  mapMutations,
7  mapState,
8  useStore,
9} from '@/store'
10
11export default defineComponent({
12  setup() {
13    const store = useStore()
14  },
15  data() {
16    return {}
17  },
18  computed: {
19    ...mapState(['gUsername']),
20    ...mapGetters(['username']),
21    //                ^ the param of mapGetters is specific
22  },
23  created() {
24    console.log(this.username)
25    //                ^ this `username` is `string`
26    this.setName(1)
27    //       ^ the type of param is `number`
28    this.SET_NAME('Tom')
29    //       ^ the type of param is `string`
30  },
31  methods: {
32    ...mapActions(['setName']),
33    //                 ^ the param of mapActions is specific
34    ...mapMutations(['SET_NAME']),
35    //                  ^ the param of mapMutations is specific
36  },
37})
38</script>

Sponsor Me

If you like this project, please consider to sponsor me. I will keep working on this project and add more features.

License

MIT License © 2023