Managing data in Vue3 with multiple instances of Composition API data store allows for separate

Question

Managing data in Vue3 with multiple instances of Composition API data store allows for separate

Consider simplifying a practical scenario...

Imagine having a web application with two columns, each utilizing the same component. The functionality is based on data storage and functions that are stored in a separate composition api js file, which is then imported into the component via provide/inject. It works seamlessly.

However, is there a way to write the composition api js file once, and then generate multiple instances when it's imported to the Vue app? This would allow for individual instances to be assigned to each component without sharing the same data object. I understand that if you import the same file using different names...

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

...they end up sharing the same objects because they are essentially importing the same file under different names, not creating distinct instances of the file.

Is there a method to achieve this desired outcome? I'm open to any approach that can lead to the same result (without requiring duplicate files for independent usage). One idea was to create a single file that exports objects and functions, followed by two separate files that import specific components of the initial file, and finally letting Vue import these two files - but unfortunately, it did not work as expected.

While there are numerous other ways to tackle this issue, I am intrigued by exploring this particular possibility first, preferably without relying on Vuex.

Thank you!

javascript vue.js vuejs3 vue-composition-api

Answer 1

Answer №1

Here is a method to achieve the desired outcome:

/* 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() {
 // This function will provide separate instances of variables for each function call
 const var1 = ref(0);
 const comp_var1 = computed(() => var1.value + shared_var_1.value);
 // comp_var1 will update its value when either var1 or shared_var_1 values are updated
 return { var1, comp_var1 };
}

Example usage:

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


/* Any additional setup required for the component or file */
setup() {
 const { var1, comp_var1 } = composable_variables();
 /*
 Perform actions with
 shared_var_1, shared_var_2, var1, comp_var1
 */
 // Return any data needed for the template
 return { shared_var_1, shared_var_2, var1, comp_var1 }
}

In this context, shared_var_1 and shared_var_2 serve as Vuex store values, while var1 and comp_var1 are unique for each function call. This allows them to be utilized in various components as distinct variables sharing common functionality without sharing their values.

Answer 2

Here is a method to achieve the desired outcome:

/* 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() {
 // This function will provide separate instances of variables for each function call
 const var1 = ref(0);
 const comp_var1 = computed(() => var1.value + shared_var_1.value);
 // comp_var1 will update its value when either var1 or shared_var_1 values are updated
 return { var1, comp_var1 };
}

Example usage:

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


/* Any additional setup required for the component or file */
setup() {
 const { var1, comp_var1 } = composable_variables();
 /*
 Perform actions with
 shared_var_1, shared_var_2, var1, comp_var1
 */
 // Return any data needed for the template
 return { shared_var_1, shared_var_2, var1, comp_var1 }
}

In this context, shared_var_1 and shared_var_2 serve as Vuex store values, while var1 and comp_var1 are unique for each function call. This allows them to be utilized in various components as distinct variables sharing common functionality without sharing their values.

Answer 3

Answer №2

In the 'path' composable, you have the option to define two states and then choose the appropriate state using code like this:

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

All you need to do is set up your whichInstance condition to pick the desired instance.

Your composable structure might look something like this:

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

Answer 4

In the 'path' composable, you have the option to define two states and then choose the appropriate state using code like this:

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

All you need to do is set up your whichInstance condition to pick the desired instance.

Your composable structure might look something like this:

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

Managing data in Vue3 with multiple instances of Composition API data store allows for separate

Answer №1

Answer №2

Similar questions

When render returns another component, React does not invoke componentWillMount

Gather all possible routes within the JSON structure

The React JSX error message "Maximum update depth exceeded" occurs when there

What is the best way to eliminate the left padding on a TimelineItem component?

The Handsontable namespace does not include the _editors module in its exports

What is the best way to display a component in Vue.js only when the user is redirected from a specific page?

The concept of self-referencing in TypeScript

Error: Could not locate local grunt on Windows 7 Professional

Error: The specified function (0, _ignore.getFileExtensions) is not a valid function

What is the process for employing a template in Vue3 as opposed to utilizing the native template?

Application with Single Page design has a Large DOM, leading to sluggish performance

Using Vue.js: Ways to recycle a template within a component without needing to export it as a separate component

Changing global properties in VueCli

The tooltip in Amcharts malfunctions when incorporating the DurationAxis

Preserve the values of checkboxes throughout the entire website by utilizing localStorage

What steps do I need to take in order to make the navbar-collapse function properly with an animated

Displaying vue-i18n output in the Quasar data-table title field

Angular is not yet able to identify the $resource framework

When was Chrome first updated to include timezone offset support for Intl.DateTimeFormat()?

Guide to ordering two arrays using a common randomized sorting method