# useCacheTree Hook

`useCacheTree` 是一个 控制tree结构拖动后本地缓存拖动顺序的hook。
- 如果项目中有复用系统管理这部分逻辑，直接把useCacheTree的引入地址改下即可： 
```js
// 将引入由 本地 改为线上
// import { useCacheTree } from './hook/useCacheTree.js' 
import { useCacheTree } from '@ksconsole/hooks'

```

## useCacheTree 参数
 * key {String} 唯一的key, 用于区分不同的缓存tree, 本地local中缓存的名称由内置的cache_tree_list_加上传入的key组成。例如key为 project,最终缓存的名称为 cache_tree_list_project

## 功能
*  **dragTreeByKey** {Function}, 通过key值来保存经过拖拽后改变了顺序的tree结构，并将拖拽后的结果放在本地local缓存
*  **getCacheTree** {Function} 获取本地缓存的tree结构函数
*  **cacheTreeList** {Array} 本地缓存的tree list数据
*  **compareTreeData** {Function} 比对缓存tree和从接口获取的数据差异，如果顺序有改动，择从缓存中获取该部分顺序

## 使用方法

<div class="options-api">

```vue
<script setup>
import { useCacheTree } from '@ksconsole/hooks';
const { dragTreeByKey, getCacheTree, compareTreeData, cacheTreeList } =
  useCacheTree('app');
function dragend(node) {
  const oldNode = get(node, '[0].srcNode', null);
  const newNode = get(node, '[0].toNode', null);
  const oldkey = get(node, '[0].srcNode.key', '');
  const newkey = get(node, '[0].toNode.key', '');
  dragTreeByKey(treeData.value, oldkey, newkey);
}
onMounted(async () => {
  // 获取了 接口返回的tree 后需要 去和缓存里的值比对，如果有缓存值，需要更新接口返回的值
  getCacheTree();
  // 获取tree接口
  await store.getTreeList();
  const cacheTree = cacheTreeList.value;
  if (cacheTree.length) {
    const reset = compareTreeData(treeData.value, cacheTree);
    // 重置treeData
    store.changeCacheTreeSort(reset);
  }
});
</script>
<template>
  <KSTree
    ...
    :data="treeData"
    :data="treeData"
    @dragend="dragend"
    ...
  >
    应用
  </KSTree>
</template>

```

</div>