用Vue3.0+typescript写vuex的模块化拆分

用Vue3.0+typescript写vuex的模块化拆分

最近自己学习了下vue3.0+ts，在vuex这一块遇到些问题记录一下

以下代码中的写法请参考官方vuex文档：
https://next.vuex.vuejs.org/zh/guide/typescript-support.html#vue-%E7%BB%84%E4%BB%B6%E4%B8%AD-store-%E5%B1%9E%E6%80%A7%E7%9A%84%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E

目录结构如下：

message.ts代码:

export interface Message {
  total: number;
}

const state: Message = {
  total: 123,
};

export const dema = {
  namespace: true,
  state,
};

user.ts代码：

export interface User {
  name: string;
  age: number;
}

const state: User = {
  name: "张三",
  age: 12,
};

export const module = {
  namespace: true,
  state,
};

type.ts代码：

import { User } from "./modules/user/user";
import { Message } from "./modules/message/message";

export interface demo {
  module: User;
  dema: Message;
}

index.ts代码：

import { InjectionKey } from "vue";
import { createStore, Store, useStore as baseUseStore } from "vuex";
//baseUseStore可以随意起名字
import { demo } from "./type";
import { module } from "./modules/user/user";
import { dema } from "./modules/message/message";

export const key: InjectionKey<Store<demo>> = Symbol();
export const store = createStore<demo>({
  modules: {
    module,
    dema,
  },
});
export function useStore(): Store<demo> {
  return baseUseStore(key);
}

页面中调用即可拿到 index.vue：

<template>
  <div>
    首页
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { useStore } from "../store";
// import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    onMounted(() => {
      console.log(store.state.module.name);
    });
    return {};
  },
});
</script>

<style></style>

注意：在modules中新添加模块后，需要重新npm run serve跑，不然会出现console.log能取到state中的属性值，但是页面报类型错误。重新运行就好了

有大佬知道为什么嘛？麻烦在评论区解答一下，感激不尽！