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

2022 年 3 月 27 日
本文字数：2197 字
阅读完需：约 7 分钟

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

其实可以比较的就是 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')@Componentexport 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}@Moduleexport 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

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/11e52f7e8f066847208940bb9】。文章转载请联系作者。

zhoulujun

关注

还未添加个人签名 2021.06.25 加入

还未添加个人简介

发布

暂无评论

创作场景

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

vuex-class

vuex-module-decorators

@MutationAction

vuex-class-modules

vue-class 与 vuex-module-decorators 合璧

zhoulujun

评论