Switching from using a computed property in Vue 2 to implementing the Vue 3 Composition API

Question

Switching from using a computed property in Vue 2 to implementing the Vue 3 Composition API

I am currently in the process of updating my Vue 2 application to Vue 3 and I have been exploring how to work with computed properties using the Composition API in Vue 3.

One particular challenge I am facing is migrating a Vue 2 computed property that provides common data to multiple components. I am wondering how I can achieve the same functionality in Vue 3 using the Composition API, specifically with getters and setters.

sharingDataInComponents() {
        let obj={}, objProperty = Object.defineProperty;
        // variables
        objProperty(obj, 'size'   , {get:()=>this.size});
        objProperty(obj, 'shape'  , {get:()=>this.shape});
        objProperty(obj, 'navigation'   , {get:()=>this.navigation});
        objProperty(obj, 'addBtn' , {get:()=>this.addBtn});
         // functions
        objProperty(obj, 'onAddClick', {get:()=>this.onAddClick});

        return obj;
    },

As I am new to the Vue 3 Composition API, I would appreciate guidance on how to successfully migrate this computed property. Thank you!

javascript vue.js vuejs2 vuejs3

Answer 1

Answer №1

Check out the code snippet below for an example:

const { ref, computed } = Vue
const app = Vue.createApp({
  setup() {
    const size = ref(35)
    const shape = ref('circle')
    const navigation = ref('left')
    const addBtn = ref(true)
    const onAddClick = () => {console.log('add')}
    
    const sharingDataInComponents = computed(() => {
      let obj={}, objProperty = Object.defineProperty;
        // variables
        objProperty(obj, 'size'   , {get:()=>size.value});
        objProperty(obj, 'shape'  , {get:()=>shape.value});
        objProperty(obj, 'navigation'   , {get:()=>navigation.value});
        objProperty(obj, 'addBtn' , {get:()=>addBtn.value});
         // function
        objProperty(obj, 'onAddClick', {get:()=>onAddClick});

        return obj;
    })
    
    return { size, shape, navigation, addBtn, onAddClick, sharingDataInComponents }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div @click="sharingDataInComponents.onAddClick">
    {{ sharingDataInComponents.size }}
  </div>
</div>

Answer 2

Check out the code snippet below for an example:

const { ref, computed } = Vue
const app = Vue.createApp({
  setup() {
    const size = ref(35)
    const shape = ref('circle')
    const navigation = ref('left')
    const addBtn = ref(true)
    const onAddClick = () => {console.log('add')}
    
    const sharingDataInComponents = computed(() => {
      let obj={}, objProperty = Object.defineProperty;
        // variables
        objProperty(obj, 'size'   , {get:()=>size.value});
        objProperty(obj, 'shape'  , {get:()=>shape.value});
        objProperty(obj, 'navigation'   , {get:()=>navigation.value});
        objProperty(obj, 'addBtn' , {get:()=>addBtn.value});
         // function
        objProperty(obj, 'onAddClick', {get:()=>onAddClick});

        return obj;
    })
    
    return { size, shape, navigation, addBtn, onAddClick, sharingDataInComponents }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div @click="sharingDataInComponents.onAddClick">
    {{ sharingDataInComponents.size }}
  </div>
</div>

Switching from using a computed property in Vue 2 to implementing the Vue 3 Composition API

Answer №1

Similar questions

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

Unable to utilize ES6 syntax for injecting a service

Uh oh! An error occurred when trying to submit the form, indicating that "quotesCollection is not defined" in Mongodb Atlas

Chrome is experiencing a problem with anchor tags that have an href attribute set to a "blob:" URL and using a target of "_blank"

Set up your Typescript project to transpile code from ES6 to ES5 by utilizing Bable

Transform an array of objects into a nested tree structure with Javascript

How can I filter rows in HTML using Vue.js based on string options?

The section cannot be shown in a flex layout within a grid container

Switch it up - modify the directory for static assets

Querying data with parameters in a client-side rendered application with Next.js

The hyperlink tag within the overlay div is unresponsive

Implementing component method calls in store.js

The challenge of populating information within a Datalist

Different ways to enhance max-http-header-size in Vue application

Encountering an issue: Unable to load resources - Server returned a status code of 500

The best way to handle custom errors between Backend (Express) and Frontend (Vue)

Undo a CSS transition when clicked

Even after setting the handler to return false, Angular continues to submit the form

Can one intercept the window.location.replace event?

Change from one value to another using a decaying sinusoidal wave