# vue-tsx-template

**Repository Path**: Yubi233/vue-tsx-template

## Basic Information

- **Project Name**: vue-tsx-template
- **Description**: vue3+vite2+tsx+css modules+yuex
希望大伙能找我提提yuex的意见。
QQ：652738413
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: yuex
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-04-17
- **Last Updated**: 2021-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Typescript + Vite2 + Tsx + Yuex + Css Modules

> 关于Tsx中使用vue，请阅读 https://github.com/vuejs/jsx-next/blob/dev/packages/babel-plugin-jsx/README-zh_CN.md
---

## yuex

本人写的一个typescript友好的状态管理工具。

#### 安装
`npm i yuex`

#### 怎么使用

`todo...`

## 此分支为使用yuex的DEMO

1. `/store/modules/user.ts` 展示了怎么构建一个module
2. `/app.tsx` 使用了user的state

和vuex在Composition Api中一样，使用computed获得响应性。

## 与vuex相比，yuex拥有以下优点
- 更好的typescript使用体验，提供了一些接口和要求写泛型。
- 使用更加严格，但简洁，将`Mutations`和`getters`封装成`StateHandler`。(具体可参考个人写的[vuex概述的此部分](https://gitee.com/Yubi233/yubi-blog/blob/master/%E6%A1%86%E6%9E%B6/vuex%E6%A6%82%E8%BF%B0.md#%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E6%95%B0%E6%8D%AE%E7%95%A5%E5%BE%AE%E7%B9%81%E7%90%90))。


---
#### 一种有趣的Action使用

> 我希望像vuex那样使用在Action里使用context，同时在暴露给Vue组件中的时候，并不需要传入这个参数，而且拥有参数提示。

以下是实现思路，利用了type的一些奇妙用法。

1. 构造函数中的需要的action参数只需要判断是否有这个参数，而不需要判断该参数的传参和返回值。

```
interface ITestAction {  
  actionA: (name: string) => void;
}

// YuexModule的构造函数的参数, IAction是泛型，传入ITestAction
action: { [key in keyof IAction]: any}, 
```

2. 在构造函数中，使用Proxy来传入context。
```
// action为 IAction类型
this.action = new Proxy(action as Object, {
  get(target, p: string) {
    return (...args: any[]) => {
      (target as any)[p](context, ...args); // 这里传入context
    }
  }
}) as IAction;
```

3. 外部的Action则也需要设置泛型来提供提醒，以下是在[demo里的例子](https://gitee.com/Yubi233/vue-tsx-template/blob/yuex/src/store/modules/user.ts)
```
const userAction = {
  login: (context: TContext<TUserHandlerKey, IUserAction>, username: string, password: string) => {
    context.stateProxy.username = username;
  },
}
```

#### 响应性的获取
借助了vue3的reactive：`state = reactive(state as Object) as IState;`

#### TODO...

1. 可能可以给action增加生命周期
2. createModule的重载
3. 看看能不能给js也提供一个较好的使用体验