专栏首页云前端[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式

[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式

原文:https://markus.oberlehner.net/blog/context-and-provider-pattern-with-the-vue-3-composition-api/

React Context API 提供了一种 不用在组件树中逐层传递 props (也称 prop drilling)的前提下 共享被多个组件都需要的属性 (比如用户设置、UI 主题等)的方式。尽管 Vue.js 没有自带的完全一致的抽象,但在本文中,我们将看到 在 Vue 3 中,我们已经拥有了可以快速复刻前者功能的所有必需工具。

用户设置 provider

在本例中,来看看如何运用这一模式 让某些信息全局可用

如下的 ProvideUserSettings 组件,提供了一个反应式的 state 及一些默认值,还有一个 update() 函数用以设置 state 对象。

// src/components/ProvideUserSettings.js

import {
  provide,
  reactive,
  readonly,
  toRefs,
} from 'vue';

// 使用 symbols 制造独特标识
export const UserSettingsStateSymbol = Symbol('User settings state provider identifier');
export const UserSettingsUpdateSymbol = Symbol('User settings update provider identifier');

export default {
  setup() {
    const state = reactive({
      language: 'en',
      theme: 'light',
    });
    
    // 使用 `toRefs()` 确保其在消费者组件中广泛可用
    // 而 `readonly()` 预防了用户修改全局状态
    provide(UserSettingsStateSymbol, toRefs(readonly(state)));

    const update = (property, value) => {
      state[property] = value;
    };
    provide(UserSettingsUpdateSymbol, update);
  },
  render() {
    // 该 provider 组件是 “renderless” 的
    // 其自身不渲染任何东西
    return this.$slots.default();
  },
};

下面来看看如何在应用中使用 ProvideUserSettings 组件:

<!-- src/App.vue -->

<script>
import ProvideUserSettings from './components/ProvideUserSettings';

export default {
  name: 'App',
  components: {
    ProvideUserSettings,
  },
};
</script>

<template>
  <ProvideUserSettings>
    <div>
      <!-- ... -->
    </div>
  </ProvideUserSettings>
</template>

或许在遍及应用各处的多个组件中都需要这个设置。因此,将 provider 置于顶层的 App 组件中很有必要。

如此一来在组件树中的任意位置都能访问到该用户设置了。

<!-- src/components/ButtonPrimary.vue -->

<script>
import { inject } from 'vue';

import { UserSettingsStateSymbol } from './ProvideUserSettings';

export default {
  setup() {
    const { theme } = inject(UserSettingsStateSymbol);
    return { theme };
  },
};
</script>

<template>
  <ButtonBase
    :class="$style[`t-${theme}`]"
  >
    <slot/>
  </ButtonBase>
</template>

<style module>
.t-light { /* ... */ }
.t-dark { /* ... */ }
</style>

如上所示,我们已经看到了如何在 inject() 过的上下文中 消费 用户设置状态 了。

接下来的例子中,将演示如何在应用中的任意组件里 更新 该状态:

<!-- src/components/ThemeSwitcher.vue -->

<script>
import { inject } from 'vue';

import { UserSettingsUpdateSymbol } from './ProvideUserSettings';

export default {
  setup() {
    const updateUserSettings = inject(UserSettingsUpdateSymbol);
    const updateTheme = value => updateUserSettings('theme', value);

    return { updateTheme };
  },
};
</script>

<template>
  <div>
    <button @click="updateTheme('dark')">
      Enable darkmode
    </button>
    <button @click="updateTheme('light')">
      Enable lightmode
    </button>
  </div>
</template>

这一次我们通过 UserSettingsUpdateSymbol 来 inject() 得到 provider 中的 update() 函数,并将其包裹在一个新的 updateTheme() 函数中,用来直接设置用户设置对象中的 theme 属性。

当两个按钮之一被点击,用户设置就被更新了,并且 因为该状态是一个反应式对象,所有 inject() 了该状态的组件也都将被更新

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] 深入 OAuth2.0 和 JWT

    从基于计算机的应用出现伊始,几乎每个开发者在其职业生涯内都会面对的一个最常见也是最复杂的问题,就是安全性(security)。这类问题意味着要考虑理解由谁提供什...

    江米小枣
  • Chrome Extension

    Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包

    江米小枣
  • [译] 理解 CORS

    当你看到这个信息,就意味着响应失败了;但你依然能在浏览器开发工具的网络 tab 里看到返回数据 -- 这是什么情况呢?

    江米小枣
  • Python matplotlib数据可视化 subplot绘制多个子图

    数据可视化的时候,有时需要将多个子图放在同一个画板上进行比较。通过使用GridSpec类配合subplot,可以很容易对子区域进行划定和选择,在同一个画板上绘制...

    叶庭云
  • weex-23-clipboard模块

    酷走天涯
  • 161. 旋转图像交换加转置

    样例 给出一个矩形[[1,2],[3,4]],90度顺时针旋转后,返回[[3,1],[4,2]]

    和蔼的zhxing
  • 事件风暴过程全体验-下篇

    作为TW技术咨询师,为多家企业进行架构和 Fintech 创新相关技术咨询,如架构设计、遗留系统上云迁移及规划、各种技术赋能、企业技术相关平台的生态规划及落地建...

    张逸
  • 030android初级篇之android应用的启动界面

    应用启动界面,显示产品LOGO,公司Logo或者开发者信息等,同时如果准备的工作较多,可以在显示启动界面的同时后台进行准备工作,提高用户体验。

    上善若水.夏
  • Android自定义GLSurfaceView

    当我们需要把同一个场景渲染到不同的Surface上时,此时系统GLSurfaceView 就不能满足需求了,所以我们需要自己创建EGL环境来实现渲染操作。 注意...

    曾大稳
  • Java:抽象类(abstract class) & 接口(Interface)到底有什么区别

    下面,将主要讲解Java中抽象的2种实现方式:抽象类(abstract class)和接口(Interface)

    Carson.Ho

扫码关注云+社区

领取腾讯云代金券