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
    }
}
})