如何实现TypeScript下对Vue2项目中Vuex的改造方案？
- 内容介绍
- 文章标签
- 相关推荐
本文共计739个文字，预计阅读时间需要3分钟。
Vue2与Vuex的结合中，难以无缝嵌入TS。因此，需要借助库如vuex-class、vuex-module-decorators等来适配。Vuex的前端对比流行趋势：有Vuex-aggregate、Vuex-class、Vuex-module-decorators等库，相关内容可参考趋势图：[链接]。
vue2与vuex都无法无缝融入TS生态，所以需要vuex-class、vuex-module-decorators等库做对接vuex目前比较流行的有：vuex-aggregate 、 vuex-class、vuex-module-decorators
npm搜到相关的，看下趋势图：www.npmtrends.com/vuex-class-vs-vuex-class-component-vs-vuex-class-module-vs-vuex-class-modules-vs-vuex-module-decorators-vs-vuex-aggregate
其实可以比较的就是 vuex-class 与vuex-module-decorators，个人更加喜好vuex-class，当然可以二者结合起来一起使用。一个在store定义，一个在vue组件中使用。
项目地址：github.com/ktsn/vuex-class，虽然这玩意三年不更新了，但是也没有啥呀。
这个需要配合vue-class-component 使用。
import{Componentastsc}from'vue-tsx-support'; import{Component,Prop}from'vue-property-decorator'; import{State,Getter,Action,Mutation,namespace}from'vuex-class' constsomeModule=namespace('path/to/module') @Component exportdefaultclassDemoextendstsc<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项目地址：github.com/championswimmer/vuex-module-decorators
官方文档：championswimmer.in/vuex-module-decorators/pages/advanced/namespaced.html
这个是方便定义 store module的
import{Module,VuexModule,Mutation,Action}from'vuex-module-decorators' exportinterfaceUserInfo{ name:string; age:number } @Module exportdefaultclassUserInfoextendsVuexModule{ name='zhoulujun' age=30 @Mutation setUser(user:UserInfo){ this.name=user.name } //action'incr'commitsmutation'increment'whendonewithreturnvalueaspayload @Action({commit:'setUser'}) getUser(){ //不能直接调用this.setUser return5 } //action'incr'commitsmutation'increment'whendonewithreturnvalueaspayload @Action getUser(id){ returnbestofvue.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 betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230
Vue & TypeScript 初体验 - 使用Vuex (vuex-module-decorators)juejin.cn/post/6844904003633954829
转载本站文章《Vuex在TSX中的改造方案：TS改造Vue2项目Vuex如何处置？》,
请注明出处：www.zhoulujun.net/html/webfront/ECMAScript/vue/8752.html
本文共计739个文字，预计阅读时间需要3分钟。
Vue2与Vuex的结合中，难以无缝嵌入TS。因此，需要借助库如vuex-class、vuex-module-decorators等来适配。Vuex的前端对比流行趋势：有Vuex-aggregate、Vuex-class、Vuex-module-decorators等库，相关内容可参考趋势图：[链接]。
vue2与vuex都无法无缝融入TS生态，所以需要vuex-class、vuex-module-decorators等库做对接vuex目前比较流行的有：vuex-aggregate 、 vuex-class、vuex-module-decorators
npm搜到相关的，看下趋势图：www.npmtrends.com/vuex-class-vs-vuex-class-component-vs-vuex-class-module-vs-vuex-class-modules-vs-vuex-module-decorators-vs-vuex-aggregate
其实可以比较的就是 vuex-class 与vuex-module-decorators，个人更加喜好vuex-class，当然可以二者结合起来一起使用。一个在store定义，一个在vue组件中使用。
项目地址：github.com/ktsn/vuex-class，虽然这玩意三年不更新了，但是也没有啥呀。
这个需要配合vue-class-component 使用。
import{Componentastsc}from'vue-tsx-support'; import{Component,Prop}from'vue-property-decorator'; import{State,Getter,Action,Mutation,namespace}from'vuex-class' constsomeModule=namespace('path/to/module') @Component exportdefaultclassDemoextendstsc<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项目地址：github.com/championswimmer/vuex-module-decorators
官方文档：championswimmer.in/vuex-module-decorators/pages/advanced/namespaced.html
这个是方便定义 store module的
import{Module,VuexModule,Mutation,Action}from'vuex-module-decorators' exportinterfaceUserInfo{ name:string; age:number } @Module exportdefaultclassUserInfoextendsVuexModule{ name='zhoulujun' age=30 @Mutation setUser(user:UserInfo){ this.name=user.name } //action'incr'commitsmutation'increment'whendonewithreturnvalueaspayload @Action({commit:'setUser'}) getUser(){ //不能直接调用this.setUser return5 } //action'incr'commitsmutation'increment'whendonewithreturnvalueaspayload @Action getUser(id){ returnbestofvue.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 betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230
Vue & TypeScript 初体验 - 使用Vuex (vuex-module-decorators)juejin.cn/post/6844904003633954829
转载本站文章《Vuex在TSX中的改造方案：TS改造Vue2项目Vuex如何处置？》,
请注明出处：www.zhoulujun.net/html/webfront/ECMAScript/vue/8752.html