javascript - Can I declare a function inside a reactive object in Vue 3? - Stack Overflow

admin管理员组

文章数量:1363337

The following reactive object has a variable and also a function declared inside of it:

const state = reactive({
    names: [] as string[],

    add(name: string): void {
        this.names.push(name);
    },
});

So that I can call it directly:

state.add('foo');

The official docs say nothing about having functions inside reactive.

Is there any problem with this approach?

The following reactive object has a variable and also a function declared inside of it:

const state = reactive({
    names: [] as string[],

    add(name: string): void {
        this.names.push(name);
    },
});

So that I can call it directly:

state.add('foo');

The official docs say nothing about having functions inside reactive.

Is there any problem with this approach?

• javascript
• vue.js
• vuejs3

Share Follow edited 20 hours ago rodrigocfd asked 23 hours ago rodrigocfdrodrigocfd 8,12788 gold badges4646 silver badges7979 bronze badges 1

• 1 It's perfectly normal. There would be a problem if "this" were bound to wrong context – Estus Flask Commented 23 hours ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Yes! You can define a function inside a reactive object, Vue reactive is a proxy that tracks property access and updates, so whenever you update the names array, the change will be accessible.

Be careful with this keyword, with normal functions add() {...} dynamically bind this to the reactive object, but arrow functions add: () => {...} do not have their own this, for more details about this see https://stackoverflow/a/134149/29157031

Here is an example:

<script setup lang="ts">
import { reactive } from 'vue'

const state = reactive({
    names: [] as string[],
    add(name: string): void {
        this.names.push(name);
    },
    add_2: (name: string): void => {
        // this.names.push(name); // ERROR: Cannot read properties of undefined (reading 'names')
        state.names.push(name);
    },
});

setTimeout(()=>{
  state.add('1');
  state.add_2('2');
}, 2000)

</script>
<template>
  <button @click="()=>state.add('John')">Add Name 1</button>
  <button @click="()=>state.add_2('John')">Add Name 2</button>
  <p>Names: {{ state.names }}</p>
  <p>Count: {{ state.names.length }}</p>
</template>

see this vue playground to test the code

本文标签： javascriptCan I declare a function inside a reactive object in Vue 3Stack Overflow