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 删除。