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