8.16 笔记

知识点1 antdv 树形结构

场景：每次点击展开节点，才会动态加载数据

const onLoadData = treeNode => {
 return new Promise(resolve => {
 if (treeNode.dataRef.children) {
  resolve();
  return;
 }
 setTimeout(() => {
  treeNode.dataRef.children = [{
  title: 'Child Node',
  key: `${treeNode.eventKey}-0`,
  }, {
  title: 'Child Node',
  key: `${treeNode.eventKey}-1`,
  }];
  treeData.value = [...treeData.value];
  resolve();
  }, 1000);
 });

思路：

1. 这个函数返回了一个Promise对象
2. 会做一个判断，假如他有children，那么就调用resolve函数，返回已经解决的Promise对象
3. 如果没有，那么就会用setTimeout来模拟一个异步过程
4. 将dataRef.children赋值为两个节点，然后直接更新，触发vue的响应式机制，重新赋值。

知识点2 vuex

1. 注册模块，store.registerModule

// 注册模块 `myModule`
store.registerModule('myModule', {
  // namespaced
  namespace：true,
  state:{},
  getters:{}
})

// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

后续访问你可以使用store.state.myModule和store.state.nested.myModule

2. 在模块中使用，mapGetters和mapMUtations和mapState他们其实就相当于一种映射的关系

  computed: {
    // mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
    ...mapGetters({
      user: 'sys/user',
      views: 'sys/views',
      collapsed: 'sys/collapsed',
      taskBarData: 'sys/taskBarData',
      idMenuMaps: 'sys/idMenuMaps',
      activeRoute: 'sys/activeRoute',
      selectedKeys: 'sys/selectedKeys',
      activityMenu: 'sys/activityMenu',
      activityView: 'sys/activityView',
      breadcrumbRoutes: 'sys/breadcrumbRoutes'
    }),
  },

INFO

1. 以后如果想要访问user，就可以不再使用store.getters.sys.user可以直接使用store.user
2. 使用对象展开运算符将getter混入computed里面

参考链接：Module | Vuex

知识点3 inject

1. provide和inject都是在setup里面写的

  // 可以在父组件里面直接写
  provide(/*注入名*/"message",/*注入内容*/"hello")

  // 也可以在根组件上直接写
  const app = createApp({})

  app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

  // 直接取
  inject("message")

  // 设置默认值
  inject("message","你好")

2. 尽可能让数据在provide的组件里面修改，不要在inject的组件修改，这里面只是展示作用，如果你想要确保，注入值不能被注入方修改，那么可以使用**readonly()**来包装提供的值。

INFO

可以provide的时候提供一个函数，用于修改状态

<!-- 在供给方组件内 -->
<script setup>
import { provide, ref } from 'vue'

const location = ref('North Pole')

function updateLocation() {
  location.value = 'South Pole'
}
// 提供多个，包裹为一个对象
provide('location', {
  location,
  updateLocation
})
</script>

<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'

const { location, updateLocation } = inject('location')
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>