Vue3 多实例组合 API 数据存储

Question

简化现实生活中的情况...

假设我有一个包含两列的 webapp。 两列中使用相同的组件。 该功能使用在单独的组合 api js 文件中创建的数据存储和功能，通过导入然后提供/注入使组件可用。 效果很好。

但是有没有办法用api的组合编写一次js文件，然后在导入到Vue应用程序时创建多个实例？ 这样，可以将单独的实例发送到每个组件，并且它们不会共享相同的数据 object。 我知道如果您导入具有多个名称的同一个文件...

import instanceone from "path";
import instancetwo from "path";

...它们将共享相同的对象，因为它将相同的文件作为两个名称导入，而不是文件的两个实例。

有没有办法实现这样的目标？ 我对任何可以实现最终目标的设置感兴趣（不需要文件的两个副本来实现两个独立的用途）。 我拿了一张传单，想可能创建一个导出对象和函数的文件，然后创建两个文件，每个文件导入该单个文件的适当部分，然后让 Vue 导入这两个文件可能会工作......但不，不是那么多.

显然还有很多其他方法可以做到这一点，但我想首先探索这种可能性。 最好不使用 Vuex。

谢谢！

Answer 1

以下是实现这一目标的方法之一

/* composable_module.js */

import { ref, computed } from 'vue';

export const shared_var_1 = ref(0);
export const shared_var_2 = ref(0);

export function composable_variables() {
 // will return separate instance of variables for each call
 const var1 = ref(0);
 const comp_var1 = computed(() => var1.value + shared_var_1.value);
 // comp_var1 updates value when either var1 or shared_var_1 value gets updated
 return { var1, comp_var1 };
}

用法如下

/* component_1.vue */
import { shared_var_1, shared_var_2, composable_variables } from 'composable_module.js';


/* other things needed for component or any file */
setup() {
 const { var1, comp_var1 } = composable_variables();
 /*
 Do what you want to do with
 shared_var_1, shared_var_2, var1, comp_var1
 */
 // return whatever you wanted to use in template
 return { shared_var_1, shared_var_2, var1, comp_var1 }
}

这里shared_var_1 ， shared_var_2将充当 vuex 存储值，而var1 ， comp_var1将为每个 function 调用分开，因此可以在多个组件中用作共享通用功能但不共享值的单独变量。

Answer 2

在您的“路径”可组合中，您可以定义两个状态，然后使用以下内容调用相关的 state：

const { getItem1, getItem2, setItem1, setItem2 } = (whichInstance) ? instanceOne : instanceTwo

您只需要定义您的 whichInstance 条件来确定您想要的实例。

你的可组合可能是这样的：

const stateOne = reactive({
    item1: true,
    item2: 1
})

const stateTwo = reactive({
    item1: false,
    item2: 2
})

export function instanceOne() {
    let stateRef = toRefs(stateOne)

    /* Getters */
    const getItem1 = () => {
        return stateRef.item1
    }
    const getItem2 = () => {
        return stateRef.item2
    }

    /* Mutations */
    const setItem1 = (value) => {
        stateRef.item1.value = value
    }
    const setItem2 = (value) => {
        stateRef.item2.value = value
    }

    return {
        state: toRefs(stateOne),
        getItem1,
        getItem2,
        setItem1,
        setItem2
    }
}


export function instanceTwo() {
    let stateRef = toRefs(stateTwo)

    /* Getters */
    const getItem1 = () => {
        return stateRef.item1
    }
    const getItem2 = () => {
        return stateRef.item2
    }

    /* Mutations */
    const setItem1 = (value) => {
        stateRef.item1.value = value
    }
    const setItem2 = (value) => {
        stateRef.item2.value = value
    }

    return {
        state: toRefs(stateTwo),
        getItem1,
        getItem2,
        setItem1,
        setItem2
    }
}
})