Vuex+ts规范案例

准备工作

所需了解的vuex接口类

Module<S,R>

module的类型

S 代表当前module的State类，
R代表 createStore的State类

ActionContext<S,R>

store上下文的类型

S 代表当前的State类，
R代表 createStore的State类

StoreOptions

代表创建的Store类型
这个类代表store的配置参数不代表vuex实例
S 代表当前module的State类，

Store

vuex实例类 可用直接挂载的app.use

所需了解vuex的Store需要准备State类型

文件名 root-types.ts 下面文件引入的就是这个接口类

export interface RootState {
//根据实际情况里面定义自己需要的类型
}

创建实例

vuex ts支持 官网
官网的案例不全这里提供比较完善的解决方案，。有些类型没讲解

import {  App, InjectionKey } from 'vue';
import Vuex,{ createStore, Store,StoreOptions } from 'vuex';
import {loginModule} from './modules/login';
import { RootState } from './root-types';
interface State {
    count: number
  }
// 定义 injection key 
export const key: InjectionKey<Store<State>> = Symbol()
// 创建一个新的 store 实例 StoreOptions<RootState>
 const store:Store<RootState> = createStore({
    state (){
    
    },
    modules:{
        loginModule
   }
  })
/**
 * 挂载到vue实例函数
 * @param app vue实例
 */
 export function setupStore(app: App<Element>) {
  app.use(store,key);
}

modules案例

import {Store,Module, ActionContext} from 'vuex';
import { RootState } from '../root-types';
interface LoginState {
    permissionList:Array<number>;
} 
export const loginModule:Module<LoginState,RootState>= {
    namespaced: true,//namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
    state: ():LoginState => ({
      permissionList:[]
    }),
    mutations: {
      increment (state:LoginState) {
        // 这里的 `state` 对象是模块的局部状态
        state.permissionList.push(state.permissionList.length+1)
      }
    },
    getters: {
        doneTodos (state:LoginState)  {
          return state.permissionList.filter(todo => todo)
        }
      },
    actions: {
        increment (context:ActionContext<LoginState,RootState>) {
          context.commit('increment')
        }
      }
  }
  

挂载到Vue

import { createApp } from 'vue'
import App from './App.vue'
import { setupRouter } from './router'
import {setupStore} from './store/index';
const app =createApp(App)
setupStore(app)
setupRouter(app)
app.mount('#app')