vuex目前比较流行的有:vuex-aggregate 、 vuex-class、vuex-module-decorators
npm搜到相关的,看下趋势图:vuex-aggregate vs vuex-class vs vuex-class-component vs vuex-class-module vs vuex-class-modules vs vuex-module-decorators | npm trends
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
项目地址:GitHub - ktsn/vuex-class: Binding helpers for Vuex and vue-class-component,虽然这玩意三年不更新了,但是也没有啥呀。
这个需要配合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
官方文档:Namespaced Modules | vuex-module-decorators
这个是方便定义 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和 都是类似的玩意,用法具体可参看:Typescript class decorators for vuex modules | BestofVue
其他的也就不多说了
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) Vue & TypeScript 初体验 - 使用Vuex (vuex-module-decorators) - 掘金
转载本站文章《Vuex在TSX中的改造方案:TS改造Vue2项目Vuex如何处置?》,
请注明出处:Vuex在TSX中的改造方案:TS改造Vue2项目Vuex如何处置? - vue入坑总结 - 周陆军的个人网站