vueuse 中文文档

VueUse createInjectionState 组件传值

VueUse createInjectionState 是对Vue3 Provide/Inject的封装实现组件传值,它可把数据穿透组件传给子组件使用,解决了Provide/Inject 无法追踪数据源的问题。

在线例子

例子

与createGlobalState区别

createGlobalState 也可以组件间共享数据,但是它的生命周期是整个APP,当你关闭网页它才会销毁。
createInjectionState  的生命周期是当使用它的相关组件被销毁,它就会被销毁。

代码示例

useCounterStore.ts 会被根组件和B组件引用,根组件引用了A组件(子组件),A组件引用了B组件(孙组件),根组件直接跳过子组件把值传给孙组件。

// useCounterStore.ts
import { computed, reactive, ref } from 'vue'
import { createInjectionState } from '@vueuse/shared'

//定义SKU类型
interface Sku{
    count:number,
    id:number,
    name:string
}

const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: Sku) => {
  // state 状态
  const sku = reactive(initialValue)

  // getters 属性
  const double = computed(() => sku.count * 2)

  // actions 方法
  function increment() {
    sku.count++
  }
  return { sku, double, increment }
})

export { useProvideCounterStore }
// If you want to hide `useCounterStore` and wrap it in default value logic or throw error logic, please don't export `useCounterStore`
export { useCounterStore }

createInjectionState.vue 根组件,引用了A组件。

<template>
  <div>  
  <div>
    我是根组件, 我传入了sku对象并不停的修改ID的值
    <br>{{ sku }}
    <CompA/>
  </div>
  </div>
</template>
<script setup lang="ts">
/*
 vueuse 中文文档
 https://www.itxst.com/vueuse/tutorial.html
*/
import { computed, onMounted, reactive } from 'vue';
import { createGlobalState, useStorage } from '@vueuse/core'
import CompA from './createInjectionState_A.vue'
import { useProvideCounterStore } from './useCounterStore'
 
const sku=reactive({id:1,count:99,name:'香蕉'});

//在根组件传入对象
useProvideCounterStore(sku);

onMounted(() => {
   setInterval(()=>{
    sku.id++;
   },1000)
});
</script>

createInjectionState_A.vue A组件(子组件),A组件啥也没干。

<template>
  <div> 
    <div>
    我是A组件, 我使用了B组件
    <br> 
    <CompB/>
  </div>
  </div>
</template>
<script setup lang="ts">
/*
 vueuse 中文文档
 https://www.itxst.com/vueuse/tutorial.html
*/
import { computed, onMounted, reactive } from 'vue';
import { createGlobalState, useStorage } from '@vueuse/core' 
import CompB from './createInjectionState_B.vue'
</script>

createInjectionState_B.vue B组件(孙组件)接收了根组件传入的数据。

<template>
  <div>
    <div> 
 我是B组件{{sku}},我获取到了根组件传入的值<br> <button @click="increment">点修改Count值</button>
 </div>
  </div>
</template>
<script setup lang="ts">
/*
 vueuse 中文文档
 https://www.itxst.com/vueuse/tutorial.html
*/
import { computed, onMounted, reactive } from 'vue';
import { createGlobalState, useStorage } from '@vueuse/core'
import { useCounterStore } from './useCounterStore'

// 获取根组件传入的数据
const { sku, double,increment } = useCounterStore();

onMounted(() => {
 
});
</script>

类型声明

/**
 * Create global state that can be injected into components.
 *
 * @see https://vueuse.org/createInjectionState
 *
 */
export declare function createInjectionState<
  Arguments extends Array<any>,
  Return
>(
  composable: (...args: Arguments) => Return
): readonly [
  useProvidingState: (...args: Arguments) => Return,
  useInjectedState: () => Return | undefined
]
Catalog
vueuse 入门 State 状态 createGlobalState 全局状态 createInjectionState 组件传值 createSharedComposable useAsyncState 异步响应式 useDebouncedRefHistory useLastChanged 最后修改时间 useLocalStorage 响应式存储 useManualRefHistory useRefHistory 历史快照 useStorageAsync useSessionStorage 响应式存储 useStorage 响应式存储 useThrottledRefHistory Elements 元素 Browser 浏览器 Sensors 感应监测