V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  allzc  ›  全部回复第 1 页 / 共 1 页
回复总数  11
@yetrun 谢谢大佬回答,有心了,一直忘了登,不好意思,你说的方向是对的,我现在解决了,彻底不用生命周期去控制每个组件了
209 天前
回复了 allzc 创建的主题 Vue.js vue3 ref 的值问题
@leoleoasd 你说的应该是对的,我明天 try 一下,大佬牛逼!
209 天前
回复了 allzc 创建的主题 Vue.js vue3 ref 的值问题
@iOCZ 通过 pinia ,A 通过 store 中的方法 F 传值给 store ,B 监听 store 中的方法 F ,F 触发,B 从 store 中拿出传入的值做处理
209 天前
回复了 allzc 创建的主题 Vue.js vue3 ref 的值问题
@NerbraskaGuy 我换种输值就可以直接传输用的 用 push(...) 另一个 js 能接收到的
209 天前
回复了 allzc 创建的主题 Vue.js vue3 ref 的值问题
我对象也试了下 跨 js 确实会失败 当前组建直接用不受影响
@DICK23 destroy 不执行了 感觉这种控制方式影响了整个生命周期的问题了 具体可以看下 下面的代码回复
@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;
@ivslyyy 用的就是 v-if watch 具体监听什么?监听这个 store 嘛
@molvqingtai 没用到路由 全局所有组件处在同一阶层上,每个都用 v-if 来控制
2021-06-25 15:09:59 +08:00
回复了 allzc 创建的主题 问与答 cesium 前景怎么样
@KouShuiYu 我觉得毕设用到这玩意很牛逼了 大学教的技术太 low 了 毕业从事程序猿了吗
2021-06-25 14:47:44 +08:00
回复了 allzc 创建的主题 Vue.js 关于 vue, css, es6 前段进阶的求教
@devwolf 草 过了一年 我真的在搞 webgl 了
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3430 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 17ms · UTC 11:43 · PVG 19:43 · LAX 04:43 · JFK 07:43
Developed with CodeLauncher
♥ Do have faith in what you're doing.