用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中的属性值，但是页面报类型错误。重新运行就好了

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

用Vue3.0+typescript写vuex的模块化拆分相关推荐

Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
vue3.0 + typescript openlayers实现地图标点.移动.画线.显示范围.测量长度.测量面积.画三角形.画正方形.画圆.线选.画笔.清除测量.清除地图所有等功能由于最近项目中用 ...
Vue3.0+TypeScript+Vite
Vue3.0 + TypeScript + Vite Vue3.0+TypeScript+Vite 项目创建(推荐使用yarn包管理器) 项目结构 main.ts App.vue: Compositi ...
来自一枚rookie的项目开发——vue3.0+typescript+element-plus+vue-router4+Pinia之动态路由（上）
动态路由(上) 配合动态路由的菜单(理论上可无限递归)  <template><div class="menu">< ...
一个简单案例教你如何用Typescript写Vuex
案例源代码: github.com/danielhuoo/- 前言相信很多人都像我一样,学习使用了vuex后,想把项目改写成Typescript.但是官方教程要么晦涩难懂,要么缺少鲜活的例子.我花了 ...
来自一枚rookie的项目开发——vue3.0+typescript+element-plus+vue-router4+Pinia之动态路由（下）
路由守卫结合JWT token鉴权控制路由跳转 Pinia使用 import { defineStore } from 'pinia' import { Entity } from '../globa ...
【VUE】vue3.0后台常用模板
vue3.0后台常用模板: 1.vue-admin-perfect 在线预览 gitee国内访问地址:https://yuanzbz.gitee.io/vue-admin-perfect/#/home ...
Vue3.0实践：使用Vue3.0做JSX(TSX)风格的组件开发
前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...
vue3.0实战项目
vue3.0+typescript+vite2实战:后台管理系统一.技术栈二.功能架构三.框架搭建四.安装插件 1.路由插件vue-router4安装使用 2.vuex4的安装 3.安装sas ...

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

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

用Vue3.0+typescript写vuex的模块化拆分相关推荐

最新文章

热门文章