之前在使用VUE2的时候有用到VUEX状态管理系统。
我用的比较多的地方是子父组件传值，或者爷孙组件传值。就是共享状态。
VUEX在我这里的作用主要还是为了简化组件中的代码的复杂度。所用的值使用VUEX统一管理，对后期的维护以及扩展性都有很大的帮助。
Vuex为我们提供了大概以下几个功能：
集中式存储管理应用的「所有组件」的「状态」保证状态以「可预测」的方式「发生变化」与调试工具集成，提供功能：time-travel、状态快照导入导出
共享状态必须符合两个条件：
响应式：当状态改变时，使用它们的组件也应更新
可用性：可以在任何组件中访问状态
在VUE3中，其为我们提供了更加轻量化的ref，reactive响应式方法。
Common.ts
// 公共状态文件：替代VUEX
import { reactive } from 'vue';
/**
* @name: 全局状态显示
* @author: camellia
* @email: [email protected]
* @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: [email protected]
* @date: 2021-01-10
*/
watch(
() => common.drawerShow,
() => {
data.drawerShow = common.drawerShow;
}
);
/**
* @name: 声明data
* @author: camellia
* @email: [email protected]
* @date: 2021-01-10
*/
const data = reactive({
drawerShow: common.drawerShow,
});
/**
* @name: 关闭组件
* @author: camellia
* @email: [email protected]
* @date: 2021-01-10
*/
const close = () => {
data.drawerShow = false;
common.drawerShow = data.drawerShow;
}
/**
* @name: 将data绑定值dataRef
* @author: camellia
* @email: [email protected]
* @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
}
}
}
这是怎么注入的呢？我们还是看图来说话：
20210319095502920.jpg
我们都知道 Vue 是一颗「组件树」，我们只要保证是「父节点」 provide，那么它的「子节点」就一定可以通过 inject 获取到。
举例：
A provide，B 可以 inject，C 可以 inject，D 可以 inject
B provide，D 可以 inject
D provide，没有其它节点可以 inject
C provide，没有其它节点可以 inject
以上大概就是现阶段我对使用VUE3内置API替代VUEX的基本理解。
有好的建议，请在下方输入你的评论。
欢迎访问个人博客
https://guanchao.site