当前位置 : 主页 > 编程语言 > 其它开发 >

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

来源:互联网 收集:自由互联 发布时间:2022-05-30
vue2与vuex都无法无缝融入TS生态,所以需要vuex-class、vuex-module-decorators等库做对接 vuex目前比较流行的有:vuex-aggregate 、 vuex-class、vuex-module-decorators npm搜到相关的,看下趋势图:https://w
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

 

  StarsIssuesVersionUpdatedCreatedSize 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 Minified + gzip package size for vuex-class in KB vuex-class-component   213 40 2.3.6 2 months ago 3 years ago Minified + gzip package size for vuex-class-component in KB vuex-class-module       0.0.16 3 years ago 5 years ago Minified + gzip package size for vuex-class-module in KB vuex-class-modules   175 17 1.3.0 a year ago 3 years ago Minified + gzip package size for vuex-class-modules in KB vuex-module-decorators   1,705 131 2.0.0 2 months ago 4 years ago Minified + gzip package size for vuex-module-decorators in KB

其实可以比较的就是 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

上一篇:ARTS Week 31
下一篇:没有了
网友评论