Accessing ref values from composable

Question

Here is my Vue3 app code:

<template>
  {{ names_data }}
</template>

<script>
import getData from "./composables/getData"

export default {
  name: "App",
  setup() {
    var filenames = ["test1.json", "test2.json"];
    const { names_data, error, load_data } = getData(
      filenames
    );
    load_data();
    console.log("names", names_data)

    console.log("error", error)

    return { names_data };
  },
};
</script>

The imported composable function is the following:

import { ref } from "@vue/runtime-core";

const getData = (filenames) => {
  const names_data = ref([])
  const error = ref(null)

  const load_data = async () => {
    try {
      var promises = [];
      for (let i = 0; i < filenames.length; i++) {
        var filename = filenames[i]
        promises.push(
          fetch(`data/${filename}`).then(
            (res) => (res.ok && res.json()) || Promise.reject(res)
          )
        );
      }
      const data = await Promise.all(promises);
      names_data.value = data
    } catch (err) {
      error.value = err.message;
      console.log(error.value);
    }
  };
  return { names_data, error, load_data }
};

export default getData

and the data files contain the following:

test1.json

{
  "members": {
    "0": "Alice",
    "1": "Bob",
    "2": "Charlie"
  }
}

test2.json

{
  "members": {
    "0": "David",
    "1": "Elizabeth",
    "2": "Fred"
  }
}

This all works: I can see the names_data from the template showing on screen. However in the console the names_data appears as follows:

RefImpl {_shallow: false, dep: undefined, __v_isRef: true, _rawValue: Array(0), _value: Proxy} dep: Set(1) {ReactiveEffect} __v_isRef: true _rawValue: (2) [{…}, {…}] _shallow: false _value: Proxy {0: {…}, 1: {…}} value: (...) [[Prototype]]: Object

I want to be able to access the values in names_data for further processing, like putting them in a table, but when I do console.log(names_data.value) in the App I get a Proxy object to an empty array. I think the names_data object loses reactivity somehow, as it is not updated when load_data() is called. But it clearly is reactive in the template. So I'm confused about what is going on here.

How can I access the value of the ref to process it further?

Estus Flask · Accepted Answer · 2021-12-01 14:51:43Z

2

It works as expected. Without using reactivity this would result in this popular race condition. The point of using reactivity is that values are reactive and can be composed in other places through composition API.

In this case it's unnecessary to wait for load_data to complete in setup body. It's supposed to be accessed at the time when a value is available:

const { names_data, error, load_data } = getData(...);
load_data();
watch(names_data, data => {
    console.log(data);
});

answered Dec 1, 2021 at 14:51

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

2 Comments

berkelem Over a year ago

Thanks. I'm new to Vue and Javascript so the link is helpful.

berkelem Over a year ago

I have a follow-up question here: stackoverflow.com/questions/70247984/…

berkelem · Accepted Answer · 2021-12-02 15:56:57Z

0

Follow-up answer to Estus Flask's accepted answer:

If I make names_data a dictionary instead of a list, i.e. by doing

...
names_data = ref({})
...
...
    const data = await Promise.all(promises);
    for (let ind=0; ind<data.length; ind++) {
      let filename = filenames[ind]
      names_data.value[filename] = data[ind]
    }
...

then watch() no longer works. It has to be replaced in the setup() by watchEffect() as follows:

    watchEffect(() => {
      console.log("updated data", names_data.value)
    })

edited Dec 2, 2021 at 15:56

answered Dec 2, 2021 at 11:28

berkelem

2,1453 gold badges21 silver badges41 bronze badges

Collectives™ on Stack Overflow

Accessing ref values from composable

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related