vueuse/core之computedInject函数

把computed和inject的功能组合起来,用于对注入的数据进行响应式计算

能够在依赖注入inject的时候,进一步对数据进行加工

demo

context.ts 像普通provide/inject定义的一样,定义数据类型,内容如下:

ts 复制代码
import  { InjectionKey } from "vue";
interface Item{
  key:number,
  value:string
}
export const ArrayKey:InjectionKey<Item[]> = Symbol('symbol-key')

在父组件像普通provide一样,提供数据

vue 复制代码
<template>
  <h1>Parent父级节点</h1>
  <div>{{array }}<button @click="handleChange">改变</button></div>
  <hr>
  <Childer></Childer>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'
import Childer from './components/Childer.vue';
import { ArrayKey } from './components/context';

const array = ref([
  {
    key:1,
    value:'苹果'
  },
  {
    key:2,
    value:'香蕉'
  }
])
provide(ArrayKey, array.value)

function handleChange () {
  array.value[0].value = '橘子'+Math.random()
}
</script>

在后代组件中,用computedInject()代替普通的inject()

vue 复制代码
<template>
  <h1>这是子组件</h1>
  {{ fooArr }}
</template>
<script lang="ts" setup>
import { inject, watchEffect } from 'vue';
import {computedInject} from '@vueuse/core'
import {ArrayKey } from './context';
const fooArr = computedInject(ArrayKey, (source) => {
  if (!source) {
    return []
  }
  const arr = [...source]
    arr.unshift({
        key:0,
        value:'水果'
    })
    return arr
});

</script>

api参数

1、默认值

和vue的inject()一样,支持3个参数

ts 复制代码
// 源码如下
export function computedInject(key, options, defaultSource, treatDefaultAsFactory) {
    source = inject(key, defaultSource, treatDefaultAsFactory) as T
}

可以看出computedInject()的第1/3/4参数是原样传给vue的inject()

而vue的inject()参数可以看官网

2、第2个参数

第2个参数可以是一个函数,也可以是一个含有 {get(){}, set(){}} 的对象

ts 复制代码
const result = computedInject(ArrayKey, {
  get (neVal) {
    return []
  },
  set (neVal) {
  }
});

源码

ts 复制代码
// key,defaultSource,treatDefaultAsFactory 原样传给
export function computedInject(key,options,defaultSource,treatDefaultAsFactory) {
  let source = inject(key)
  if (defaultSource)
    source = inject(key, defaultSource)
  if (treatDefaultAsFactory)
    source = inject(key, defaultSource, treatDefaultAsFactory)

  if (typeof options === 'function') {
    return computed(ctx => options(source, ctx))
  }
  else {
    return computed({
      get: ctx => options.get(source, ctx),
      set: options.set,
    })
  }
}
相关推荐
计算机毕设指导64 分钟前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome