How to include get() and set() functions inside computed function using composition API

Question

I'm trying to include get() and set() functions inside the computed method using Composition API. However, this is possible using an option API like this.

export default {
  name: "Home",
  computed: {
    colorCode: {
        get(){

        },
        set(){
            
        }
    }
  },
};

Is there any way to do this same task with Composition API? Really appreciate if somebody can help me in this situation, I was trying like this,

setup() {
    const colorCodeGet = computed(() => {
      return $store.state.colorCode;
    });

    const colorCodeSet = computed(() => {});

    return { colorCode };
  },

Read the fine manual. It should be expected that computed has a signature that matches this feature. It actually does, vuejs.org/guide/essentials/computed.html#writable-computed — Estus Flask
– Estus Flask, Commented Jun 11, 2022 at 6:06

Alireza Safari · Accepted Answer · 2022-06-11 08:18:56Z

1

as mentioned here, You can do it like this:

<script lang="ts">
import { defineComponent, computed, WritableComputedRef } from 'vue';

interface IBook {
  name: string;
  author: string;
}

class Book implements IBook {
  name: string;
  author: string;

  constructor(name, author) {
    this.name = name;
    this.author = author;
  }
}

export default defineComponent({
  setup() {
    const book: WritableComputedRef<IBook> = computed({
      get(): IBook {
        return bookTakenFromSomePlace;
      },
      set(newBook: IBook): void {
        bookOldValue = new Book(newBook.name, newBook.author);
      },
    });

    return {
      book,
    };
  }
});
</script>

answered Jun 11, 2022 at 8:18

Alireza Safari

2062 gold badges4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to include get() and set() functions inside computed function using composition API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related