vue3+Ts使用vuex模块化和非模块化管理的2种方式(非pinia)

官网写的很清楚：https://vuex.vuejs.org/zh/guide/typescript-support.html

2种方式 (都不是使用pinia的)

1：复杂版本(不定义自己的 useStore 组合式函数)

使用的时候需要在vuex引入 useStore 在store文件引入导出的key
import { useStore } from ‘vuex’
import { key } from ‘./store’

import { createStore } from "vuex";
import type { InjectionKey } from "vue";
import type { Store } from "vuex";
//这个是定义的接口用来限制store的参数类型
export interface State {
  count: number;
  
}
// 定义 injection key
// 导出对象下的变量 需要在mian.ts引入key 
export const key: InjectionKey<Store<State>> = Symbol()
 
export default createStore<State>({
  //加类型注解 里面的参数才会生效 
  state: { count: 211 },
  getters: {
    // dobuleCount:state=>state.count*2,
    // 或者
    dobuleCount(state){return  state.count*2}
  },
  mutations: {
    add(state,payload:number){
      console.log(state.count)
    }
  },
  actions: {},
  modules: {},
});

vue组件使用：

import { useStore } from "vuex";
import { key } from "../store";//自己的store文件
let store = useStore(key);
console.log(store.state.count)//211

2：简单版本

ts两处变化：
1：import { useStore as baseUseStore } from “vuex”;
2：export function useStore () { return baseUseStore(key)//把key导出去了 }
vue使用变化：
import { useStore } from ‘…/store’

import { createStore } from "vuex"; 
import type { InjectionKey } from "vue";
import type { Store } from "vuex";
//useStore as baseUseStore,就这里有个变化
import   { useStore as baseUseStore } from "vuex";

// 限制类型
export interface State {
  count: number;
  
}
 export const key: InjectionKey<Store<State>> = Symbol();
 
 
export default createStore<State>({
  //加类型注解 里面的参数才会生效 
  state: { count: 211 },
  getters: {
    // dobuleCount:state=>state.count*2,
    // 或者
    dobuleCount(state){return  state.count*2}
  },
  mutations: {
    add(state,payload:number){
      console.log(state.count)
    }
  },
  actions: {},
  modules: {},
});
// 定义自己的 `useStore` 组合式函数 这里也有了变化
 export function useStore () {
   return baseUseStore(key)//把key导出去了
 }

vue组件使用：（不需要引入key 引入useStore不在需要在vuex引入）

  import { useStore } from '../store'
  let store = useStore(); 
  console.log(store.state.count)

以上两种方式的 在main.ts引入是一致的

import store, { key } from "./store";
createApp(App).use(store,key).mount('#app')

vuex使用模块化modules
新建一个modules文件夹 因为这是模块不是vuex默认的index.ts所以很多类型需要自己去写限制

// 不知道什么类型 把鼠标悬浮到默认的index.ts文件下的mutation上获取mutation的类型依次操作(action，getters…)…

users.ts文件

import  type {MutationTree,ActionTree,GetterTree}  from 'vuex'
import  type  {State}  from '../index'
定义类型限制接口interface
export  interface UsersState{
    username:string,
    age:number
}


let state:UsersState = {
    username:'zhuzhu',
    age:121
};
//<UsersState,State>//参数1是为了访问当前模块下的state的变量  参数2是引入的主模块下的
//不知道类型注解几个参数看上图
let getters:GetterTree<UsersState,State> = {
    // dobulecount:state=>state.age*2
    // 或者
    dobulecount(state){
        return state.age*2
    }
};
let mutations:MutationTree<UsersState> = {
    change(state){
        console.log(state.age)
    }
};
let actions:ActionTree<UsersState,State> = {};
export default {
  namespaced: true,//开始模块命名空间
  state,
  getters,
  mutations,
  actions,
};

index.ts主模块引入modules (使用上面的简单案例代码进行描述

import { createStore } from "vuex";
import type { InjectionKey } from "vue";
import type { Store } from "vuex"; 
import   { useStore as baseUseStore, } from "vuex"; 
import users from "./modules/users";
// 引入模块下的文件类型
import { UsersState } from "./modules/users";
// 限制类型
export interface State {
  count: number;
  
}
//继承主模块下的接口 (变化部分)
interface StateAll extends State{
   users:UsersState, //UsersState是上面引入的类型 users是自己定义的名
   //若是多个模块  依次类推
}

//这个就不可使用了 要换成下面的继承之后的接口
// export const key: InjectionKey<Store<State>> = Symbol();
 export const key: InjectionKey<Store<StateAll>> = Symbol();
 
export default createStore<State>({
  //加类型注解 里面的参数才会生效 
  state: { count: 211 },
  getters: {
    // dobuleCount:state=>state.count*2,
    // 或者
    dobuleCount(state){return  state.count*2}
  },
  mutations: {
    add(state,payload:number){
      console.log(state.count)
    }
  },
  actions: {},
  modules: {
     users
     },
});
// 定义自己的 `useStore` 组合式函数 这里也有了变化
 export function useStore () {
   return baseUseStore(key)//把key导出去了
 }

使用方式 还是和上面的简单方式一样 (只不过是多了访问模块名而已)

  import { useStore } from '../store'
  let store = useStore();  
  console.log(store.state.users.age)

不懂的请留言 欢迎提意见进行改正