How to access data from IonViewWillEnter

Hey everyone,

I’m building an app with Ionic 5 and Vue (yey!) and I’m having some trouble.

I have 2 tabs. In one tab I’m showing a list of items and you have a floating action button to add new items to that list. I’m storing the items in local storage, and what I want is the list to get refreshed when I add a new one, so it shows the existing + the new one.

To do that, I’m fetching the data onMounted but as explained in the docs, Ionic only mounts the component once, and then you should use ionViewWillEnter lifecycle. The problem is that with the current API, custom ion lifecycle hooks need to be passed as methods, but I’m using the Composition API as suggested by the tutorial, and I can’t access refs nor data from the methods when using it.

How are we supposed to do this? I’m using the default tabs structure you get when creating a new ionic project with the --type=vue flag.

Any help would be appreciated

A example of the code i’m writing:

setup() {
    const router = useRouter();
    const entries = ref<Array<Entry>>([]);

    function goToNewEntry() {
     // The view to add new entries
      router.push('/new-entry')
    }

    async function fetchAllEntries() {
      try {
        entries.value = await fetchEntries();
      } catch (error) {
        console.error(error);
      }
    }
    
    // Only called once
    onMounted(fetchAllEntries);

    const methods = {
      goToNewEntry,
      fetchAllEntries,
    };

    const data = {
      entries,
    }

    const icons = {
      add,
    }

    return {
      ...icons,
      ...methods,
      ...data,
     // first I tried adding here the lifecycle method, but it doesn't work
    }
  },
  methods: {
    ionViewWillEnter() {
      console.log(this); // in the Composition API, this points to the object
      // How can I access here the data?
    }
  }

1 post - 1 participant

Read full topic