[Vuejs]-Vue3 Multiple Instances of Composition API Data Store

by

0👍

the following is one of the way to achieve this

/* 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 };
}

usage as following

/* 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 }
}

Here shared_var_1, shared_var_2 will act as vuex store values
and var1, comp_var1 will be separate for each function call
so can be used in multiple components as separate variable sharing common functionality but not value.

0👍

Within your ‘path’ composable you could define two states, then call the relevant state with something like:

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

You just need to define your whichInstance condition to determine which instance you want.

Your composable could be something like:

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

Leave a comment