前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vuex在TSX中的改造方案:TS改造Vue2项目Vuex如何处置?

Vuex在TSX中的改造方案:TS改造Vue2项目Vuex如何处置?

原创
作者头像
周陆军
发布2022-03-27 18:51:27
1.5K0
发布2022-03-27 18:51:27
举报
文章被收录于专栏:前端架构

vuex目前比较流行的有:vuex-aggregate 、 vuex-class、vuex-module-decorators

npm搜到相关的,看下趋势图:https://www.npmtrends.com/vuex-class-vs-vuex-class-component-vs-vuex-class-module-vs-vuex-class-modules-vs-vuex-module-decorators-vs-vuex-aggregate

Stars

Issues

Version

Updated

Created

Size

vuex-aggregate

14

19

4.1.3

4 years ago

4 years ago

vuex-class

1,670

18

0.3.2

3 years ago

5 years ago

vuex-class-component

213

40

2.3.6

2 months ago

3 years ago

vuex-class-module

0.0.16

3 years ago

5 years ago

vuex-class-modules

175

17

1.3.0

a year ago

3 years ago

vuex-module-decorators

1,705

131

2.0.0

2 months ago

4 years ago

其实可以比较的就是 vuex-class 与 vuex-module-decorators,个人更加喜好vuex-class,当然可以二者结合起来一起使用。一个在store定义,一个在vue组件中使用。

vuex-class

项目地址:https://github.com/ktsn/vuex-class,虽然这玩意三年不更新了,但是也没有啥呀。

这个需要配合vue-class-component 使用。

代码语言:javascript
复制
import { Component as tsc } from 'vue-tsx-support';
import { Component, Prop } from 'vue-property-decorator';
import {  State,  Getter,  Action,  Mutation,  namespace} from 'vuex-class'
const someModule = namespace('path/to/module')
@Component
export default class Demo extends tsc<Props> {
    @State(state => state.bar) stateBar
    @Getter('foo') getterFoo
    @someModule.Getter('foo') moduleGetterFoo
    render(){
        retrun (
            <div>demo</div>
        )
    }
}

用这个,就是方便在组件中通过装饰器使用,原来vuex store 完全不用更改。

但是如果是使用@vue/composition-api的话,vue-class就无法使用。这里推荐使用vuex-module-decorators。

vuex-module-decorators

项目地址:https://github.com/championswimmer/vuex-module-decorators

官方文档:https://championswimmer.in/vuex-module-decorators/pages/advanced/namespaced.html

这个是方便定义 store module的

代码语言:javascript
复制
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
export interface UserInfo {
  name: string;
  age:number
}
@Module
export default class UserInfo extends VuexModule {
  name = 'zhoulujun'
  age = 30

  @Mutation
  setUser(user: UserInfo) {
    this.name = user.name
  }
  // action 'incr' commits mutation 'increment' when done with return value as payload
  @Action({ commit: 'setUser' })
  getUser() {
    // 不能直接调用 this.setUser
    return 5
  }
  // action 'incr' commits mutation 'increment' when done with return value as payload
  @Action
  getUser(id) {
    return http.getUser(id).then((user)=>{
        this.context.commit('setUser', user);
    })
  }
}

创建store

代码语言:javascript
复制
import Vue from 'vue';
import Vuex from 'vuex';
import { UserInfo } from './modules/user';

Vue.use(Vuex);

export interface IRootState {
  user: UserInfo
}
export default new Vuex.Store<IRootState>({
  // modules: {
  //   user: User,
  // },

});

这里需要吐槽的一点就是,@Action 装饰器里面函数本来直接调用 @Mutation 装饰的方法

@MutationAction

在vuex中是要通过commit来更改state中的数据.在vuex-module-decorators中有MutationAction修饰器,可以直接修改state数据.

代码语言:javascript
复制
export default class PassengerStore extends VuexModule {
  public username = '';
  public password = '';
 
  //'username'和'password'被返回的对象替换,
  //格式必须为`{username:...,password:...}` 
  @MutationAction({ mutate: ['username', 'password'] })
  async setPassenger(name: string) {
    const response: any = await request(name); // 接口返回 [{name:'张三',password:'123456'}]
    // 此处返回值必须和上面mutate后面的名称保持一致;
    return {
      username: response[0].name,
      password: response[0].password,
    };
  }
}

但是这种方法,必须 已经定好的结构数据。这个我们还是用的比较少的。

一般在action 还是直接使用 this.context.commit

vuex-class-modules

vuex-module-decorators和  都是类似的玩意,用法具体可参看:https://bestofvue.com/repo/gertqin-vuex-class-modules-vuejs-typescript

其他的也就不多说了

vue-class与vuex-module-decorators合璧

就是store 数据部分用vuex-module-decorators,在组件内是 使用vue-class 调用store。

就是上文前两段代码的合集

虽然说@vue/composition-api 写vue2组件可以以后很好地升级到vue3。但是vue-class-component 以后也会出vue3版本呀。

就个人层面而言,@vue/composition-api   class 继承方面感觉很不舒服。

参看文章: The State of Typed Vuex: The Cleanest Approach   https://betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230

Vue & TypeScript 初体验 - 使用Vuex (vuex-module-decorators) https://juejin.cn/post/6844904003633954829

转载本站文章《Vuex在TSX中的改造方案:TS改造Vue2项目Vuex如何处置?》, 请注明出处:https://www.zhoulujun.net/html/webfront/ECMAScript/vue/8752.html

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vuex-class
  • vuex-module-decorators
    • @MutationAction
      • vuex-class-modules
      • vue-class与vuex-module-decorators合璧
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档