Reactivity in Vue 3 with globalProperties

Question

Reactivity in Vue 3 with globalProperties

When attempting to migrate a Vue 2 plugin to Vue 3, I encountered an issue in the install function. In Vue 2, I had code that looked like this:

install(Vue, options) {
  const reactiveObj = {
    // ...
  };

  Vue.prototype.$obj = Vue.observable(reactiveObj);
}

This allowed me to access this.$obj in any component and have it reactively update when reactiveObj changed. However, in Vue 3, my attempt to replicate this behavior resulted in:

import {reactive} from 'vue';

install(app, options) {
  const reactiveObj = reactive({
    // ...
  });

 app.config.globalProperties.$obj = reactiveObj;
}

In this case, while I can access this.$obj, it is now a Proxy object and does not reactively update when reactiveObj changes. How can I achieve reactivity in this scenario?

javascript vue.js vuejs3

Answer 1

Answer №1

Whenever I update the value of $obj in my component, I like to share the working codes that have helped me figure out potential issues in my code. Below is the snippet from my "myPlugin.js" file where the plugin is defined:

myPlugin.js:

import {reactive} from 'vue';

export default {
    install(app, options) {
        const reactiveObj = reactive({
            id: 1,
            name: "my-name"
        });

        app.config.globalProperties.$obj = () => {
            return reactiveObj
        };
    }
}

The next step involves registering the plugin in my main.js file as shown below:

import { createApp } from 'vue'

import App from './App.vue'

import myPlugin from "./plugins/myPlugin"

const app = createApp(App)

app.use(myPlugin);
app.mount('#app')

Finally, here's a glimpse of the code within my component that allows users to change the values of $obj by clicking a button while highlighting its reactive nature:

component.vue:

<template>
  <div>
    <p>{{ $obj() }}</p>
    <button @click="myFunc">click to change</button>
  </div>
</template>

<script>
import {getCurrentInstance, reactive} from "vue";
export default {
  setup() {
    const thisApp= getCurrentInstance()
    const reactiveObj1 = reactive({
      id: 2,
      name: "new-name"
    });

    const myFunc = function () {
      thisApp.appContext.config.globalProperties.$obj().name = reactiveObj1.name
      thisApp.appContext.config.globalProperties.$obj().id = reactiveObj1.id
    }

    return {
      reactiveObj1,
      myFunc
    }

  }
}
</script>

Incorporating getCurrentInstance in my component has been essential due to my preference for using the composition API style. However, if you are more inclined towards the "options API" style, you may not need to utilize it.

Answer 2

Whenever I update the value of $obj in my component, I like to share the working codes that have helped me figure out potential issues in my code. Below is the snippet from my "myPlugin.js" file where the plugin is defined:

myPlugin.js:

import {reactive} from 'vue';

export default {
    install(app, options) {
        const reactiveObj = reactive({
            id: 1,
            name: "my-name"
        });

        app.config.globalProperties.$obj = () => {
            return reactiveObj
        };
    }
}

The next step involves registering the plugin in my main.js file as shown below:

import { createApp } from 'vue'

import App from './App.vue'

import myPlugin from "./plugins/myPlugin"

const app = createApp(App)

app.use(myPlugin);
app.mount('#app')

Finally, here's a glimpse of the code within my component that allows users to change the values of $obj by clicking a button while highlighting its reactive nature:

component.vue:

<template>
  <div>
    <p>{{ $obj() }}</p>
    <button @click="myFunc">click to change</button>
  </div>
</template>

<script>
import {getCurrentInstance, reactive} from "vue";
export default {
  setup() {
    const thisApp= getCurrentInstance()
    const reactiveObj1 = reactive({
      id: 2,
      name: "new-name"
    });

    const myFunc = function () {
      thisApp.appContext.config.globalProperties.$obj().name = reactiveObj1.name
      thisApp.appContext.config.globalProperties.$obj().id = reactiveObj1.id
    }

    return {
      reactiveObj1,
      myFunc
    }

  }
}
</script>

Incorporating getCurrentInstance in my component has been essential due to my preference for using the composition API style. However, if you are more inclined towards the "options API" style, you may not need to utilize it.

Reactivity in Vue 3 with globalProperties

Answer №1

Similar questions

Is it possible to wait for two asynchronous actions using only one await statement?

A Guide to Handling Errors while Converting a Map to a Promise in Typescript

Issue with error handling in Node and MongoDB when using Express, Mongoose, and the 'mongoose-unique-validator' plugin

Obtain a multiline match using regular expressions

Display an additional HTML page without altering the existing one

How to send parameters to the jquery .css() method

Resolving problems with jQuery auto-populating select dropdowns through JSON data

Incorporating external script into React website's functional component

Encountering Uncaught Syntax Error when attempting a request with JSON parameters

Issue with React conditional display not functioning properly post user input into a form

Guide to seamlessly navigating to an element using a hash in NuxtJS

JavaScript utilized to create a fully immersive full-screen webpage

Struggling with loading react storybook

At random intervals, a ReferenceError is triggered stating that Vue is not defined

Ways to activate the built-in HTML5 form validation without actually submitting the form

Controlled Material-UI v5 DateTimePicker triggers input focus upon closure

Why isn't the Nunjucks extends directive functioning when the template is stored in a different directory and being used

The onload function in jQuery is not functioning properly when the page is refreshed

Encountering npm error code 1 during npm installation in a Vue.js project

Is it possible to use AngularJS to show additional information between rows when a table row is clicked in HTML