0

我正在使用 vue2 的组合 api 插件（https://github.com/vuejs/composition-api）在我的应用程序中重用可组合项。

我有两个组件可以重用我的modalTrigger.js可组合组件，我想在其中声明某种共享状态（而不是使用臃肿的 vuex 状态管理）。

因此，在我的组件中，我执行以下操作：

import modalTrigger from '../../../../composables/modalTrigger';

export default {
    name: 'SearchButton',
    setup(props, context) {
        const { getModalOpenState, setModalOpenState } = modalTrigger();


        return {
            getModalOpenState,
            setModalOpenState,
        };
    },
};

在我的 modalTrigger 中，我有如下代码：

import { computed, ref, onMounted } from '@vue/composition-api';

let modalOpen = false; // needs to be outside to be accessed from multiple components

export default function () {
    modalOpen = ref(false);
    const getModalOpenState = computed(() => modalOpen.value);

    const setModalOpenState = (state) => {
        console.log('changing state from: ', modalOpen.value, ' to: ', state);
        modalOpen.value = state;
    };

    onMounted(() => {
        console.log('init trigger');
    });

    return {
        getModalOpenState,
        setModalOpenState,
    };
}

这有效，但这只是因为我modalOpen在函数之外声明了变量。如果我使用这个：

export default function () {
    const modalOpen = ref(false); // <------
    const getModalOpenState = computed(() => modalOpen.value);
    ...

它不是响应式的，因为 modalTrigger 被实例化了两次，都具有它自己的响应式属性。

我不知道这是否真的是要走的路，看来，我做错了什么。

我还尝试在外面声明 ref：

const modalOpen = ref(false);

export default function () {
    const getModalOpenState = computed(() => modalOpen.value);

但这会引发错误：

未捕获的错误：[vue-composition-api] 必须在使用任何函数之前调用 Vue.use(plugin)。

那么实现这一目标的正确方法是什么？我以某种方式期望 Vue 知道现有的 modalTrigger 实例并自己处理重复变量的创建......

好吧，无论如何，非常感谢您提供任何提示和提示。

干杯

编辑：

完整的 header.vue 文件：

<template>
    <header ref="rootElement" :class="rootClasses">
        <button @click="setModalOpenState(true)">SET TRUE</button>
        <slot />
    </header>
</template>

<script>
import { onMounted, computed } from '@vue/composition-api';
import subNavigation from '../../../../composables/subNavigation';
import mobileNavigation from '../../../../composables/mobileNavigation';
import search from '../../../../composables/searchButton';
import { stickyNavigation } from '../../../../composables/stickyNav';
import metaNavigation from '../../../../composables/metaNavigation';
import modalTrigger from '../../../../composables/modalTrigger';


export default {
    name: 'Header',
    setup(props, context) {
        const { rootElement, rootClasses } = stickyNavigation(props, context);

        mobileNavigation();
        subNavigation();
        search();
        metaNavigation();
        const { getModalOpenState, setModalOpenState } = modalTrigger();

        onMounted(() => {
            console.log('Header: getModalOpenState: ', getModalOpenState.value);
            setModalOpenState(true);
            console.log('Header: getModalOpenStat: ', getModalOpenState.value);
        });

        return {
            rootClasses,
            rootElement,
            getModalOpenState,
            setModalOpenState,
        };
    },
};
</script>

组合 API 设置在其他地方，那里安装的 Vue 组件与通常情况略有不同。

所以我不能真正分享整个代码，但它里面有这个：

import Vue from 'vue';
import CompositionApi from '@vue/composition-api';

Vue.use(CompositionApi)

组合 API 和其他所有可组合的工作都很好......

4

0 回答 0