vue2升级vue3：vue3真的需要vuex或者Pinia吗？hooks全有了
原创vue2升级vue3：vue3真的需要vuex或者Pinia吗？hooks全有了
原创
在写?《vue2升级vue3：TypeScript下vuex-module-decorators/vuex-class to vuex4.x》，建议新项目使用?Pinia，但是我的项目部分组件希望直接打包出去给地方使用。这个时候还是会遇到vue2 是否打包出vuex的 问题。所以，干脆舍弃 vuex/Pinia，直接使用 vue3 原生搞定——hook出现之后，状态管理的问题已经从根本上被消解了！
vue-composition 提供了类似 React Hook 的能力，将 Vue 的抽象层级从「组件级（Component）」降低为「函数级（Function）」。
当掌握了Hook（或者Composition API）之后，感觉万物皆可hook，总是想把数据和操作这堆数据的方法封装在一起！
1、方案有以下几种reactive 响应式数据取代store，在各个组件hooks 调用
const?store?=?reactive({state:?{})2、利用rovide和inject，类似react? context，做全局数据管理（不推荐）具体可参看：《vue2升级vue3:provide与inject 使用注意事项》
父组件
const?person?=?reactive({name:?'bob',?age:32});
provide('person',?person);子组件
const?person?=?inject('person');有了provide/inject和ref/reactive配合，父子组件/兄弟组件共享状态的问题已经迎刃而解。
通过provide提供了一个reactive响应式对象；然后在子组件通过inject注入该对象。在子组件修改对象的age属性，视图就会响应式更新！同样的，如果child组件也有自己的子组件，调用inject同样有效。具体参看：
- Vue3你还在用Vuex？一个“函数式”状态管理的新思路 https://zhuanlan.zhihu.com/p/345963989
- Vue3 尝鲜 Hook + TypeScript 取代 Vuex 实现图书管理小型应用 https://my.oschina.net/sl1673495/blog/4439246?（全局注入）
1、2方法结合：
hooks
export?function?useUserInfo()?{
??const?userInfo?=?reactive({?});
??
??const?login?=?(data)?=>?{...};
??const?logout?=?()?=>?{...};
??const?editUserInfo?=>?(data)?=>?{};
??
??return?{
???userInfo,
???login,
???logout,
???editUserInfo
??}
}在根组件调用provide，将userHook函数传入
import?{useUserInfo}?from?'@/hooks/userUserInfo';
provide('user',?useUserInfo())这个 封装好的东西，直接看这个：https://github.com/tbhuabi/vue-di-plugin
但是还是不推荐这个写法！即使?provide/inject 再香，我还是绕道走，总感觉 这玩意和react的 useContext + useReducer 貌似 貌合神离——可以看一下? ：https://github.com/tangxiangmin/vue3-hook/tree/master/src/useReducer
1、使用
比如我之前的数据，vuex的
/**
?*?面板查询变量
?*/
import?{?VuexModule,?Module,?getModule,?Mutation?}?from?'vuex-module-decorators';
import?store?from?'../index';
import?{?TimeRangeType?}?from?'@/components/time-range';
import?{?DEFAULT_TIME_RANGE,?TimeRange?}?from?'@/components/time-range/utils';
import?{?FiltersList,?FilterType,?QueryContextState?}?from?'@/typings';
@Module({?dynamic:?true,?store,?name:?'queryContext'?})
export?default?class?QueryContext?extends?VuexModule?implements?QueryContextState?{
??timeRange:?TimeRangeType?=?DEFAULT_TIME_RANGE;
??timezone?=?'Asia/Shanghai';
??variables:?FiltersList?=?{};
??share_uid?=?'';
??//?缓存的时间?-?TimeRangeType?转时间戳
??get?getTimeRange():?[number?|?string,?number?|?string]?{
????const?date?=?new?TimeRange(this.timeRange);
????const?[start,?last]?=?date.value;
????return?[start.valueOf(),?last.valueOf()];
??}
??@Mutation
??setTimeRange(range:?TimeRangeType)?{
????this.timeRange?=?range;
??}
??@Mutation
??setTimezone(zone:?string)?{
????this.timezone?=?zone;
??}
??@Mutation
??setShareUid(share_uid:?string)?{
????this.share_uid?=?share_uid;
??}
??@Mutation
??setVariation({?name,?value?}:?{?name:?string;?value:?FilterType?})?{
????//?this.variables[name]?=?value;
????this.variables?=?{?...this.variables,?[name]:?value?};
??}
??@Mutation
??setVariations(variables:?FiltersList)?{
????this.variables?=?variables;
??}
??@Mutation
??clear()?{
????this.variables?=?{};
????this.timeRange?=?DEFAULT_TIME_RANGE;
??}
}
export?const?QueryContextModule?=?getModule(QueryContext);直接使用响应式数据
import?{?reactive?}?from?'vue';
import?{?FiltersList,?FilterType,?QueryContextState?}?from?'@/typings';
import?{?DEFAULT_TIME_RANGE?}?from?'@/components/time-range/utils';
import?{?TimeRangeType?}?from?'@/components/time-range';
export?const?QueryContextModule?=?reactive<QueryContextState>({
??timeRange:?DEFAULT_TIME_RANGE,
??timezone:?'Asia/Shanghai',
??variables:?{},
??share_uid:?'',
});
export?function?setTimeRange(range:?TimeRangeType)?{
??QueryContextModule.timeRange?=?range;
}
export?function?setTimezone(zone:?string)?{
??QueryContextModule.timezone?=?zone;
}
export?function?setShareUid(share_uid:?string)?{
??QueryContextModule.share_uid?=?share_uid;
}
export?function?setVariation({?name,?value?}:?{?name:?string;?value:?FilterType?})?{
??QueryContextModule.variables?=?{?...QueryContextModule.variables,?[name]:?value?};
}
export?function?setVariations(variables:?FiltersList)?{
??QueryContextModule.variables?=?variables;
}
export?function?clear()?{
??QueryContextModule.variables?=?{};
??QueryContextModule.timeRange?=?DEFAULT_TIME_RANGE;
}改为类vuex，可以参看此篇文章：?Vue3 还要啥 Vuex,自定义 hooks给你实现数据共享和状态管理?https://juejin.cn/post/7054060160045547550
import?{?reactive?}?from?'vue';
import?{?FiltersList,?FilterType?}?from?'@/typings';
import?{?DEFAULT_TIME_RANGE?}?from?'@/components/time-range/utils';
import?{?TimeRangeType?}?from?'@/components/time-range';
const?store?=?reactive({
??state:?{
????timeRange:?DEFAULT_TIME_RANGE,
????timezone:?'Asia/Shanghai',
????variables:?{},
????share_uid:?'',
??},
});
export?function?setTimeRange(range:?TimeRangeType)?{
??store.state.timeRange?=?range;
}
export?function?setTimezone(zone:?string)?{
??store.state.timezone?=?zone;
}
export?function?setShareUid(share_uid:?string)?{
??store.state.share_uid?=?share_uid;
}
export?function?setVariation({?name,?value?}:?{?name:?string;?value:?FilterType?})?{
??store.state.variables?=?{?...store.state.variables,?[name]:?value?};
}
export?function?setVariations(variables:?FiltersList)?{
??store.state.variables?=?variables;
}
export?function?clear()?{
??store.state.variables?=?{};
??store.state.timeRange?=?DEFAULT_TIME_RANGE;
}
export?const?useQueryContext?=?()?=>?({
??store,
??setTimeRange,
??setTimezone,
??setShareUid,
??setVariation,
??setVariations,
??clear,
});这个使用肯定是还太粗糙，项目中使用的代码，等有空的 脱密了在分享一下
参考文章：
有了 Vue3 还要啥 Vuex,自定义 hooks给你实现数据共享和状态管理 https://juejin.cn/post/7054060160045547550
转载本站文章《vue2升级vue3：vue3真的需要vuex或者Pinia吗？hooks全有了》, 请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8881.html
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。