之前在使用VUE2的时候有用到VUEX状态管理系统。
我用的比较多的地方是子父组件传值，或者爷孙组件传值。就是共享状态。
VUEX在我这里的作用主要还是为了简化组件中的代码的复杂度。所用的值使用VUEX统一管理，对后期的维护以及扩展性都有很大的帮助。
Vuex为我们提供了大概以下几个功能：
集中式存储管理应用的「所有组件」的「状态」
保证状态以「可预测」的方式「发生变化」
与调试工具集成，提供功能：time-travel、状态快照导入导出
共享状态必须符合两个条件：
响应式：当状态改变时，使用它们的组件也应更新
可用性：可以在任何组件中访问状态
在VUE3中，其为我们提供了更加轻量化的ref，reactive响应式方法。
Common.ts
// 公共状态文件：替代VUEX import { reactive } from 'vue'; /** * @name: 全局状态显示 * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-23 */ export const common = reactive({ // 测试全局状态 glabl: 0 , // 自定义loading组件 loading:true, // 回到顶部是否显示 topShow:false, // 聊天抽屉是否显示 drawerShow:false, // 搜索字符串 search:'', // 菜单显示标识（is_menu,is_search,is_login） menuSign:'is_menu', // 当前网页url currectUrl:'', });
Draw.ts
注意引入及使用common.ts那部分代码
import { useRouter } from "vue-router"; import { PropType, ref, watch, reactive, toRefs, inject, provide, onMounted } from "vue"; import { common } from "/@/hooks/common.ts"; // 引入公共js文件 import utils from "/@/assets/js/public/function"; // 定义返回的类型 interface dataRef { close: () => void; } export default { name: "Drawer", // VUE3语法 setup函数 // setup官方文档:https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#参数 setup(props: any, content:any): dataRef { const router = useRouter(); /** * @name: 监听公共状态栏值变化 * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-10 */ watch( () => common.drawerShow, () => { data.drawerShow = common.drawerShow; } ); /** * @name: 声明data * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-10 */ const data = reactive({ drawerShow: common.drawerShow, }); /** * @name: 关闭组件 * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-10 */ const close = () => { data.drawerShow = false; common.drawerShow = data.drawerShow; } /** * @name: 将data绑定值dataRef * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-10 */ const dataRef = toRefs(data); return { close, ...dataRef } }, }
想上边的例子，只要在你要使用公共状态的地方引入common.ts，那么你就可以访问到common.ts中我们定义的变量中的值，就是共享状态。
VUE3中标还为我们提供了provide、inject依赖注入功能。
import { provide, inject } from 'vue' const ThemeSymbol = Symbol() const Ancestor = { setup() { provide(ThemeSymbol, 'dark') } } const Descendent = { setup() { const theme = inject(ThemeSymbol, 'light' /* optional default value */) return { theme } } }
这是怎么注入的呢？我们还是看图来说话：
我们都知道 Vue 是一颗「组件树」，我们只要保证是「父节点」 provide，那么它的「子节点」就一定可以通过 inject 获取到。
举例：
A provide，B 可以 inject，C 可以 inject，D 可以 inject
B provide，D 可以 inject
D provide，没有其它节点可以 inject
C provide，没有其它节点可以 inject
以上大概就是现阶段我对使用VUE3内置API替代VUEX的基本理解。
