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

Posted 2022-03-28 zhoulujun

vue2与vuex都无法无缝融入TS生态，所以需要vuex-class、vuex-module-decorators等库做对接

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 使用。

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的

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

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数据.

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