@
yetrun 我的逻辑是动态引入一个文件夹下的所有组件，给与一个状态 compState ，然后通过外部调用改变 store 中这个组件的状态，来控制显隐，比如下面的组件 B 通过 singleComp 控制 A 显示
现在的情况是 我在框架刚开始搭建的时候 onUpdated 会执行以及之后的方法 onBeforeUnmount 等等 onMounted 不执行 组件变多后变成只执行 onMounted 并且关闭再打开 不会再执行 onMounted
不明所以，所以我现在直接放在$onAction 去处理，不再用 vue 的声明周期去控制
具体看代码吧
-------------------------------------------------组件 A-----------------------------------------------------------------------
<template>
<div v-if="compInfo.compState">......</div>
</template>
<script>
import useWatchComp from "@/hooks/useWatchComp.js";
export default {
name: "AAAAAAAA",
setup() {
const { compInfo } = useWatchComp(onMountedFunc, compInfoChange);
function onMountedFunc() {
要初始化的方法。。。。。。
}
function compInfoChange(newInfo) {
状态改变触发的方法
}
return { compInfo};
},
};
-------------------------------------------------组件 B-----------------------------------------------------------------------
<template>
<div v-if="compInfo.compState">
<btn @
click="showAAAAAAAA" />
</div>
</template>
<script>
import useWatchComp from "@/hooks/useWatchComp.js";
import useComp from "@/hooks/useComp.js";
export default {
name: "BBBBBBBB",
setup() {
const { compInfo } = useWatchComp(onMountedFunc, compInfoChange);
const { singleComp } = useComp();
function onMountedFunc() {
要初始化的方法。。。。。。
}
function compInfoChange(newInfo) {
状态改变触发的方法
}
function showAAAAAAAA() {
singleComp({
compName: "AAAAAAAA",
compState: true,
compParams: { data: item },
});
}
return {
compInfo,showAAAAAAAA
};
},
};
</script>
-------------------------------------------------useWatchComp.js-----------------------------------------------------------------------
import { computed, getCurrentInstance } from "vue";
import compControl from "@/store/compControl.js";
const useWatchComp = (onMountedFunc, compInfoChange) => {
const instance = getCurrentInstance();
let compStore = compControl();
let compName =
instance.type.name;
let compInfo = computed(() => {
return compStore[compName];
});
//我的本意是将传入的 onMountedFunc 方法放入对应的 onMounted 执行 每次组件打开的话对应执行，但有一开始讲述的问题
onBeforeMount(()=>{})
onMounted(()=>{
onMountedFunc()
})
onBeforeUpdate(()=>{})
onUpdated(()=>{})
onBeforeUnmount(()=>{})
onUnmounted(()=>{})
// 组件信息变动
compStore.$onAction(
({
name, store, args,after,onError,
}) => {
after(() => {
//所以我全部放在这里面去执行
onMountedFunc()
});
onError((error) => {});
}
);
return {
compInfo,
};
};
export default useWatchComp;
-------------------------------------------------useComp.js-----------------------------------------------------------------------
import compControl from "@/store/compControl.js";
const useComp = () => {
let compStore = compControl();
// 触发单个组件
const singleComp = ({ compName, compState, compParams = {} }) => {
compStore.singleCompControl({
compName,
compState,
compParams,
});
};
// 触发多个组件
const batchComp = ({ compList, beforeClear = false }) => {
compStore.batchCompControl({
beforeClear,
compList,
});
};
return {
singleComp,
batchComp,
};
};
export default useComp;
-------------------------------------------------store/compControl.js----------------------------------------------------------------------
import { defineStore } from "pinia";
import { forIn } from "lodash";
let files = import.meta.globEager("@/views/components/*.vue");
let state = {};
forIn(files, (value, key) => {
let compName = key.replace(/\/src\/views\/components\/|\.vue/g, "");
state[compName] = {
compName,
compState: false,
compParams: {},
};
});
const useCompStore = defineStore("compControl", {
state: () => {
return state;
},
actions: {
// 批量
batchCompControl({ beforeClear = false, compList }) {
if (beforeClear) {
forIn(state, (value, key) => {
this[key].compState = false;
this[key].compParams = {};
});
}
compList.forEach(({ compName, compState, compParams = {} }) => {
this[compName].compState = compState;
this[compName].compParams = compParams;
});
},
// 单个
singleCompControl({ compName, compState, compParams = {} }) {
this[compName].compState = compState;
this[compName].compParams = compParams;
},
},
});
export default useCompStore;