%20(2).svg)
项目简介
在Vue 3里，TypeScript的支持情况较为良好，但Vuex对TypeScript的支持存在不足。本项目致力于扩展Vuex，使其能支持更多TypeScript特性，提供类型检查和编辑器提示，构建一个既保留Vuex原有功能，又能提升开发体验的扩展库。
项目的主要特性和功能
主要特性
- 高度支持TypeScript，具备强大的类型检查与自动完成功能。
- 遵循单向数据流原则，避免直接修改state中的数据。
- 支持插件系统，便于功能扩展。
- 内置loading状态管理，利于处理异步操作。
- 可创建多个独立的store实例。
功能亮点
- 类型检查：对state、getters和mutations进行全面类型声明，支持异步操作类型声明及loading状态跟踪。
- Vue风格简写：支持
articleStore.state.title简写为articleStore.title；articleStore.getters.double简写为articleStore.double；articleStore.mutations.SET_TITLE简写为articleStore.SET_TITLE。
安装使用步骤
假设用户已下载本项目的源码文件。
1. 安装依赖：打开终端，进入项目目录，使用以下命令安装依赖。
bash
npm install # 或者 yarn install
2. 使用Vuex扩展：在代码中导入Vuex扩展库并创建store实例。可参考以下示例：
```ts
import { computed, reactive, Ref, watchEffect } from 'vue'
import Vuex from '../src'
import logPlugin from './logPlugin'
// 状态的类型
interface State {
id: number | string
title: string
content: string
}
// 计算属性的类型
interface Getters {
double: Ref
// 1. 安装插件(可选)
Vuex.install([logPlugin])
// 2. 创建store 。 可以多次调用 createStore 方法创建多个 store
const articleStore = Vuex.createStore
const getters: Getters = { double: computed(() => state.title + state.title), }
// 2.1 支持 同步和异步两种写法 const mutations: Mutations = { SET_TITLE(title) { return Promise.resolve().then(() => { state.title = title }) }, }
return { state, getters, mutations, } })
/* 测试 **/ watchEffect(() => { console.log(articleStore.title) // 或者 console.log(articleStore.state.title) console.log(articleStore.double.value) // 或者 console.log(articleStore.getters.double.value) console.log(articleStore.SET_TITLE.loading.value) // 或者 console.log(articleStore.SET_TITLE.loading.value) })
articleStore.SET_TITLE('tree') // 或者 articleStore.mutations.SET_TITLE('tree') ``` 需注意，不能直接修改state中的数据，要遵循单向数据流原则。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】