Utilizing setInterval in Vue 3 to efficiently eliminate elements from an array

Question

Utilizing setInterval in Vue 3 to efficiently eliminate elements from an array

I am looking to implement a straightforward Snackbar using VUE 3. While I had no trouble doing this in Vue 2, Vue 3 seems to have some nuances.

Currently, I have stored the messages array in the Vuex store as shown below:

import { createStore } from 'vuex'

export default createStore({
  state: {
    snackbarText: []
  },
  mutations: {
    DELETE_SNACKBAR_MESSAGE(state) {
      state.snackbarBarText.shift()
    },
    ADD_SNACKBAR_MESSAGE(state, message) {
      state.snackbarBarText.push(message)
    }
  },
  getters: {
    MESSAGES: (state) => state.snackbarText
  }
})

This is what my Snackbar.vue component looks like at the moment:

import { useStore } from 'vuex';
import { ref, watch} from 'vue';

export default {
  set() {
    const store = useStore();
    const text = ref(store.getters["MESSAGES"]);
    
    if (text.value.length) {
      let timer = setInterval(() => {
        store.commit('DELETE_SNACKBAR_MESSAGE');
        
        if (text.value.length) {
          clearInterval(timer)
        }
      }, 3000)
    }    

    return { text }
  }
}

I am trying to figure out how to check the length of the text ref in the Snackbar and trigger a timer function. My challenge lies in implementing this logic in Vue 3's Composition API, which I'm still getting acquainted with.

The expected behavior is for messages to be added to the array and displayed to the user. After 3 seconds, they should be removed from the array. I find using watch cumbersome and struggle with restarting setInterval after it has been stopped.

Any guidance on this issue would be highly appreciated!

javascript vue.js vuejs3

Answer 1

Answer №1

After revising my previous response that relied on the usage of setInterval, it became apparent that this method is not suitable for the specific functionality required. The seamless transition between elements poses a challenge in this context.

In Vue2, one might opt for utilizing the EventBus to monitor any modifications within the snackbar message array. However, with the absence of this feature in Vue3, one could persist with an EventBus-like module or leverage subscribe.

The provided code snippet encapsulates the entire component:

<template>
  <transition name="component-fade" @after-leave="checkForMoreSnacks">
    <div class="snackbar" v-if="currentSnack">
      <div class="snackbar__container">
        <p>{{ currentSnack }}</p>
        <button @click="closeCurrentSnack">Close Me</button>
      </div>
    </div>
  </transition>
</template>

<script>
import { useStore } from "vuex";
import { computed, ref } from "vue";
export default {
  setup() {
    const timerInterval = 1500;
    const store = useStore();
    let timeoutToken = null;
    let snacks = computed(() => store.getters["GET_SNACKBAR_MESSAGES"]);
    let currentSnack = ref(null);

    // Triggered event that initiates the showing of Snackbar,
    // akin to emitting an event via EventBus
    store.subscribe(mutation => {
      // Listening for a specific mutation call
      if (mutation.type === "ADD_SNACKBAR_MESSAGE") {
        // Do not proceed if there already is a displayed snack
        if (currentSnack.value) return;

        // Assigns value to 'currentSnack' from the first index of 'snacks' array and removes that item from the store
        currentSnack.value = snacks.value[0];
        timeoutToken = setTimeout(() => {
          closeCurrentSnack();
        }, timerInterval);
      }
    });

    function closeCurrentSnack() {
      store.commit("DELETE_SNACKBAR_MESSAGE");
      currentSnack.value = null;
      timeoutToken = null;
    }

    function checkForMoreSnacks() {
      if (!snacks.value.length) {
        timeoutToken = null;
        currentSnack.value = null;
      } else {
        currentSnack.value = snacks.value[0];
        timeoutToken = setTimeout(() => {
          closeCurrentSnack();
        }, timerInterval);
      }
    }

    return {
      currentSnack,
      checkForMoreSnacks,
      closeCurrentSnack
    };
  }
};
</script>

<style lang="scss" scoped>
.snackbar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: 500px;
  border: solid 2px red;
  padding: 1rem;
  border-radius: 5px;

  &__container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 30px;
  }
}

.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
}

.component-fade-enter-from,
.component-fade-leave-to {
  opacity: 0;
}
</style>

The crucial aspect here lies in the utilization of the @after-leave hook. It was observed that upon removing the displayed snackbar, further checks can be performed using this hook.

This same hook was also the reason for steering clear of employing setInterval.

A Git repository for this implementation has been established at this link.

Answer 2

After revising my previous response that relied on the usage of setInterval, it became apparent that this method is not suitable for the specific functionality required. The seamless transition between elements poses a challenge in this context.

In Vue2, one might opt for utilizing the EventBus to monitor any modifications within the snackbar message array. However, with the absence of this feature in Vue3, one could persist with an EventBus-like module or leverage subscribe.

The provided code snippet encapsulates the entire component:

<template>
  <transition name="component-fade" @after-leave="checkForMoreSnacks">
    <div class="snackbar" v-if="currentSnack">
      <div class="snackbar__container">
        <p>{{ currentSnack }}</p>
        <button @click="closeCurrentSnack">Close Me</button>
      </div>
    </div>
  </transition>
</template>

<script>
import { useStore } from "vuex";
import { computed, ref } from "vue";
export default {
  setup() {
    const timerInterval = 1500;
    const store = useStore();
    let timeoutToken = null;
    let snacks = computed(() => store.getters["GET_SNACKBAR_MESSAGES"]);
    let currentSnack = ref(null);

    // Triggered event that initiates the showing of Snackbar,
    // akin to emitting an event via EventBus
    store.subscribe(mutation => {
      // Listening for a specific mutation call
      if (mutation.type === "ADD_SNACKBAR_MESSAGE") {
        // Do not proceed if there already is a displayed snack
        if (currentSnack.value) return;

        // Assigns value to 'currentSnack' from the first index of 'snacks' array and removes that item from the store
        currentSnack.value = snacks.value[0];
        timeoutToken = setTimeout(() => {
          closeCurrentSnack();
        }, timerInterval);
      }
    });

    function closeCurrentSnack() {
      store.commit("DELETE_SNACKBAR_MESSAGE");
      currentSnack.value = null;
      timeoutToken = null;
    }

    function checkForMoreSnacks() {
      if (!snacks.value.length) {
        timeoutToken = null;
        currentSnack.value = null;
      } else {
        currentSnack.value = snacks.value[0];
        timeoutToken = setTimeout(() => {
          closeCurrentSnack();
        }, timerInterval);
      }
    }

    return {
      currentSnack,
      checkForMoreSnacks,
      closeCurrentSnack
    };
  }
};
</script>

<style lang="scss" scoped>
.snackbar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: 500px;
  border: solid 2px red;
  padding: 1rem;
  border-radius: 5px;

  &__container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 30px;
  }
}

.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
}

.component-fade-enter-from,
.component-fade-leave-to {
  opacity: 0;
}
</style>

The crucial aspect here lies in the utilization of the @after-leave hook. It was observed that upon removing the displayed snackbar, further checks can be performed using this hook.

This same hook was also the reason for steering clear of employing setInterval.

A Git repository for this implementation has been established at this link.

Utilizing setInterval in Vue 3 to efficiently eliminate elements from an array

Answer №1

Similar questions

Error code 1 encountered an internal error while trying to execute a task

Unusual behavior exhibited by JavaScript's eval() function

Issue with server-side rendering due to importing routes

What is the best way to locate a specific item within an array of objects, especially when each object has the potential to contain an array of objects of the

Using the `find()` method in a loop of Mongoose iterate

Synchronizing client information in real-time: tips, tricks, and expert advice

Ionic 2: Inconsistency detected in the expression after it was verified

AngularJS Firebase Login Scope Value Not Retained After Refresh

Utilizing the "each" function in jQuery to create click events for buttons that are linked to specific paragraphs

The function Slice() does not function properly when used with two-dimensional arrays

In Javascript, swap out a particular colored region in an image with a different image

Methods to constrain click event handling between parent and child elements in Vue.js

Can SVG use a transformation matrix to switch the values of x and y coordinates?

Exploring the capabilities of the Scripting.FileSystemObject within the Microsoft Edge browser

Fetching a JSON object from an external URL using JavaScript

Is there a way to modify the existing JSON format?

Passport.authenticate() fails to redirect users to the desired destination

Content not being displayed by Javascript

What is the best way to center an infowindow in Google Maps API V3 when working with a map canvas that has a narrow width?

Error message: Unable to split path as a function when utilizing React hook forms in conjunction with Material UI