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

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

	Stars	Issues	Version	Updated	Created
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