vue3中使用依赖注入数组，在父子组件祖孙组件间传值

? ? ? ? 项目中使用到在父子组件中使用依赖注入来保持数据，开始直接使用了数组，在修改数组的方法时，直接赋值数组，导致丢失了响应，重新整理实现代码如下：

1.在types文件中，实现依赖注入的方法：

 export type CurrentList ={
    list: Array<any>;
  };

  export const SYMBOL_LIST = Symbol("List") as InjectionKey<CurrentList>;

  export const useInjectList = () => {
    return inject(SYMBOL_LIST)!;
  };
  export const useProvideList = (list:CurrentList) => { 
    const value = reactive(list);
    provide(SYMBOL_COMMENTLIST, value); 
    return value;
  };

  export type ChangeList = (list:Array<any>) => void

  export const SYMBOL_CHANGELIST = Symbol("changeList") as InjectionKey<ChangeList>;
  
  export const useInjectChangeList = () => {
    return inject(SYMBOL_CHANGELIST)!;
  };
  
  export const useProvideChangeList = (fn:ChangeList) => {
    const value = reactive(fn);
    provide(SYMBOL_CHANGELIST, value);
    return value;
  };
   

2. 父组件实现依赖：

import { useProvideChangeList, useProvideList} from './utils/taskTypes'

let list: any[] = [];
const currentList = reactive({
  list:list
});

useProvideList(currentList); 

const changeListFun = (list:any) => {
  changeRefList(list);
};
useProvideChangeList(changeListFun);

const changeRefList = (list:any[])=>{
  ...
  currentList.list=list
}

3. 子组件中，需要列表或者使用修改列表的方法则使用一下代码：

import {  useInjectChangeList, useInjectList} from './utils/taskTypes'

// 使用列表
const refList=useInjectList();

// 修改列表的方法
const changeRefList=useInjectChangeList();

// 列表使用比如：
<a v-for="item in refList.list" :key="item.id">{{item.title}}</a>

// 在某处要修改数组则比如：

changeRefList(newList)

可能多个子组件或者子子组件需要该列表，或者需要修改该列表，则可以直接使用该上述方法。