VUE3（十七）使用reactive ref 替代VUEX状态管理

之前在使用VUE2的时候有用到VUEX状态管理系统。

我用的比较多的地方是子父组件传值，或者爷孙组件传值。就是共享状态。

VUEX在我这里的作用主要还是为了简化组件中的代码的复杂度。所用的值使用VUEX统一管理，对后期的维护以及扩展性都有很大的帮助。

Vuex为我们提供了大概以下几个功能：

1.  集中式存储管理应用的「所有组件」的「状态」
   

2.  保证状态以「可预测」的方式「发生变化」
   

3.  与调试工具集成，提供功能：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