通过在导出函数之外声明变量，使 Vue Composition API 中的共享属性可组合

问题描述

我正在使用 vue2 (https://github.com/vuejs/composition-api) 的组合 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,};
}

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

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

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

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

我也尝试在外部声明引用：

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',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,};
</script>

组合 API 设置在其他地方，其中 Vue 组件的安装方式与您通常会有所不同。

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

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

Vue.use(CompositionApi)

组合 API 和其他所有组合都可以正常工作...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

composable javascript vue-composition-api vue.js