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

	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