vue3+vuex+ts 实践之代码提示

vuex 基本用法

vue3已经完美支持了typescript，但是具体如何使用呢，这篇文章我们一起来研究下

在所在的 vue3 + ts 项目脚手架中新建 store 目录，并在 store 目录下 新建 index.ts 并code以下代码

import { createStore } from "vuex";

// 定义 用户接口
export interface UserProps {
  name: string;
  age: number;
  sex: number;
}

// 定义 store根接口
export interface RootProps {
  isLogin: boolean;
  user: UserProps;
}

// 通过泛型传入 rootProps 
export default createStore<RootProps>({
  state: {
    isLogin: false,
    user: {
      name: "",
      age: 0,
      sex: 1,
    },
  },
  getters: {},
  mutations: {
    login(state, login: boolean) {
      state.isLogin = login;
    },
  },
  actions: {}
});

代码提示成功

新建 Home.vue 组件

<template>
  <div class="home"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "vuex";
import { rootProps } from "@/store";

export default defineComponent({
  name: "HomeView",
  setup() {
    const store = useStore<rootProps>();

    return {};
  },
});
</script>

在组件中使用的时候已经有提示了

vuex之模块管理

在使用 vuex 的时候，因为工程量大，代码复杂，我们就需要用到 modules 进行分模块管理 在 store 下新建文件夹 modules，在 modules中新增 comp.ts 文件并 code 如下

// 导入 vuex 中封装的 模块化的 接口
import { Module } from "vuex";
import { rootProps } from "../index";

export interface CompProps {
  compName: string;
}

const compState: Module<CompProps, rootProps> = {
  namespaced: true,
  state: {
    compName: "",
  },
  mutations: {
    setCompName(state, compName: string) {
      state.compName = compName;
    },
  },
};

export default compState;

完美代码提示

同时修改 store 下的 index.ts 文件中代码

import { createStore } from "vuex";

import compState, { CompProps } from "./modules/comp";

export interface UserProps {
  name: string;
  age: number;
  sex: number;
}
export interface RootProps {
  isLogin: boolean;
  user: UserProps;
}
export interface AllProps extends RootProps {
  compState: CompProps;
  //  这个地方可以继续添加其他的 模块化 store
}

export default createStore<RootProps>({
  state: {
    isLogin: false,
    user: {
      name: "",
      age: 0,
      sex: 1,
    },
  },
  getters: {},
  mutations: {
    login(state, login: boolean) {
        state.isLogin = login;
    },
  },
  actions: {},
  modules: {
    compState: compState,
  },
});

在 Home.vue 组件中使用

// 导入 store/index.ts 中的 所有属性的接口 AllProps
import { AllProps } from "@/store";

// 通过泛型传入 AllProps
const store = useStore<AllProps>();

代码提示成功

useStore 简单封装

当然这种写法 其实可以简单封装一下 在 store/index.ts 中新增 如下代码

import { useStore as baseUseStore } from "vuex";

export function useStore<T = AllProps>() {
  return baseUseStore<T>();
}

组件中使用

import { useStore } from "@/store";

const store = useStore();

依然完美提示