结合ts的好处

基本步骤

一、导出key(store/index.ts中)

import { createStore } from 'vuex'
// 引入InjectionKey，提供类型定义
import type { InjectionKey } from 'vue'
import type { Store } from 'vuex'

export interface State {
  // 定义一个接口并导出，可以使用state时自动提示属性
  count: number
}
// Store类型约束useStore时得到的store对象，key也是一个得到的类型
export const key: InjectionKey<Store<State>> = Symbol()


export default createStore<State>({
  state: {
    count: 1,
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

二、导入key(main.ts中)

import store, { key } from './store'
app.use(store, key)

页面中的具体使用时如下：已经可以看到自动提示了，证明成功了

三、重写useStore

import { useStore } from 'vuex';
import {key} from '@/store/index'
const store = useStore(key)
store.state.count

由于上述，每个页面引用useStore时还要重复引入key，并将key作为参数使用，所以可以重写useStore来解决重复引用问题

vuex中getters、mutations的自动类型推导

定义了state的类型后，除了payload需要定义，getters、mutations中的state会自动推断，不需要定义了

如何分模块时结合ts

出现自动提示，模块化结合ts成功

分模块时如何关联自身的state

import type { MutationTree, ActionTree, GetterTree } from "vuex"
// 主模块的类型State
import type { State } from "../index.ts"
export interface UsersState {
    username: string
    age: number
}
let state: UsersState = {
    username: 'xiaom',
    age: 20
}
let mutations: MutationTree<UsersState> = {
    changeUsers(state){
        // 能够获取自动提示
        state.age
    }
}
/**
 * UsersState 模块自身定义的类型
 * State 主模块的类型
 */
let getters: GetterTree<UsersState, State> = {

}
let actions: ActionTree<UsersState, State> = {

}
export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

pinna简化了与ts结合的使用，所以vue3更推荐使用pinna做状态管理结合ts

四、vuex结合ts使用