Vuex在TSX中的改造方案：TS改造Vue2项目Vuex如何处置？
vuex目前比较流行的有：vuex-aggregate 、 vuex-class、vuex-module-decorators
| 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
