041组件传值与状态管理绑定的实现方式

041组件传值与状态管理绑定的实现方式

从主结构页面中向下传状态管理的值

// 引入Pinia的状态管理模块
import storeModel from './stores/model';

// 定义模块名；定义需要取出的数据名。
const Model = storeModel();
const model = Model.model;

const { getTaskData } = ModelTaskMixin(model);

通过监听url参数变化重新获取模型并更新状态管理

// 通过url中参数变化重新加载模型
watch(
  () => router.currentRoute.value.params.sn,
  (newVal, oldVal) => {
    if (newVal && newVal !== oldVal) {
      getTaskData((newVal as string) || '');
    }
  },
  {
    immediate: true,
  }
);

使用状态管理值，为获得最新状态采用计算方式获得

// 这里使用计算属性是为了同步子组件中的更改
const programCom = computed(() => {
  const m = model.customConfig.page;
  return defineAsyncComponent(() => import(`./index/${m}.vue`));
});

子组件采用全量下探传值

// 向下尽量保持整个模型传递
const props = defineProps<{
  model: any;
  skin?: string;
}>();

向下传递子组件的值的时候，使用计算属性绑定

const props = defineProps<{
  model: any;
  type: string;
  skin?: string;
  index: number;
}>();
// 需要向子组件传值模型内数据，采用计算属性
const treenode = computed(() => props.model.tasks[props.index][props.type]);