allzc 最近的时间轴更新
allzc

allzc

V2EX 第 437733 号会员,加入于 2019-08-24 10:03:28 +08:00
vue3 ref 的值问题
Vue.js  •  allzc  •  174 天前  •  最后回复来自 FakerLeung
10
vue 局部注册插件可行?
Vue.js  •  allzc  •  2022-06-23 10:31:19 AM  •  最后回复来自 Ccbeango
2
cesium 前景怎么样
问与答  •  allzc  •  2021-06-26 16:38:04 PM  •  最后回复来自 libasten
6
关于 vue, css, es6 前段进阶的求教
  •  1   
    Vue.js  •  allzc  •  2021-06-25 14:47:44 PM  •  最后回复来自 allzc
    6
    allzc 最近回复了
    @yetrun 谢谢大佬回答,有心了,一直忘了登,不好意思,你说的方向是对的,我现在解决了,彻底不用生命周期去控制每个组件了
    174 天前
    回复了 allzc 创建的主题 Vue.js vue3 ref 的值问题
    @leoleoasd 你说的应该是对的,我明天 try 一下,大佬牛逼!
    174 天前
    回复了 allzc 创建的主题 Vue.js vue3 ref 的值问题
    @iOCZ 通过 pinia ,A 通过 store 中的方法 F 传值给 store ,B 监听 store 中的方法 F ,F 触发,B 从 store 中拿出传入的值做处理
    174 天前
    回复了 allzc 创建的主题 Vue.js vue3 ref 的值问题
    @NerbraskaGuy 我换种输值就可以直接传输用的 用 push(...) 另一个 js 能接收到的
    174 天前
    回复了 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 了 毕业从事程序猿了吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5875 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 17ms · UTC 06:21 · PVG 14:21 · LAX 23:21 · JFK 02:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.