vue3.0+vuex+ts实现数据模块化及类型化
跟着这篇文章自己实现一遍,并做了一点扩展,记录一下
引入vuex4.x
跟着vuex官网配置初始的store
创建store目录和vuex.d.ts
store
--index.ts // store定义文件
--type.ts // store类型定义文件
vuex.d.ts
store/type.ts
/**
* root层state类型定义
*/
export interface TypeRootState {
count: number;
}
store/index.ts
import { App, InjectionKey } from "vue";
import { createStore, useStore as baseUseStore, Store } from "vuex";
import { TypeRootState } from "./type";
// 创建一个新的 store 实例
const store = createStore<TypeRootState>({
state() {
return {
count: 0,
};
},
mutations: {
increment(state) {
state.count++;
},
},
});
export default store;
// 定义 injection key
const key: InjectionKey<Store<TypeRootState>> = Symbol();
// 定义自己的 `useStore` 组合式函数
export function useStore() {
return baseUseStore(key);
}
export const setupStore = (app: App) => {
app.use(store, key);
};
vuex.d.ts
// vuex.d.ts
import { ComponentCustomProperties } from "vue";
import { Store } from "vuex";
import { TypeRootState } from "@/store/type";
declare module "@vue/runtime-core" {
// 为 `this.$store` 提供类型声明
interface ComponentCustomProperties {
$store: Store<TypeRootState>;
}
}
main.ts引入
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { setupStore } from "./store";
const app = createApp(App);
setupStore(app); // 安装store
app.mount("#app");
至此vuex可以初步使用
<template>
<div>测试页面</div>
</template>
<script setup lang="ts">
import { useStore } from "@/store";
const store = useStore();
console.log(store.state.count); // 正常
</script>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
mounted() {
console.log(this.$store.state.count); // 正常
},
});
</script>
使用模块（module）
创建文件
store
--modules // 模块目录
--app.ts
index.ts
type.ts
store/modules/app.ts
import { Module } from "vuex";
import { TypeRootState } from "@/store/type";
export interface TypeModuleStateApp {
appCount: number;
}
export const moduleApp: Module<TypeModuleStateApp, TypeRootState> = {
state: () => ({
appCount: 0,
}),
};
store/type.ts
引入模块state类型TypeModuleStateApp, 声明并导出所有state类型定义TypeAllState
/**
* 模块state类型引入
*/
import { TypeModuleStateApp } from "./modules/app";
/**
* vuex所有state类型定义集成
*/
export interface TypeAllState extends TypeRootState {
moduleApp: TypeModuleStateApp;
}
store/index.ts
引入模块和TypeAllState; 给baseUseStore传入泛型TypeAllState
import { TypeRootState, TypeAllState } from "./type";
import { moduleApp } from "./modules/app";
// 创建一个新的 store 实例
const store = createStore<TypeRootState>({
modules: {
moduleApp: moduleApp,
},
});
export function useStore<T = TypeAllState>() {
return baseUseStore<T>(key);
}
vuex.d.ts
TypeRootState 改为 TypeAllState
import { TypeAllState } from "@/store/type";
declare module "@vue/runtime-core" {
// 为 `this.$store` 提供类型声明
interface ComponentCustomProperties {
$store: Store<TypeAllState>;
}
}
至此可以正常使用模块(module)
<template>
<div>测试页面</div>
</template>
<script setup lang="ts">
import { useStore } from "@/store";
const store = useStore();
console.log(store.state.count); // 正常
console.log(store.state.moduleApp.appCount); // 正常
</script>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
mounted() {
console.log(this.$store.state.count); // 正常
console.log(this.$store.state.moduleApp.appCount); // 正常
},
});
</script>
扩展: 在***.ts文件中使用store模块
store/index.ts;
声明自定义的store类型TypeCustomStore(继承TypeRootState),修改state的类型;
强制修改导出的store的类型;
interface TypeCustomStore extends Store<TypeRootState> {
state: TypeAllState;
}
export default store as unknown as TypeCustomStore;
然后就可以在***.ts中正常使用模块了
import store from "@/store";
console.log(store.state.moduleApp.appCount); // 正常
