We Keep Coding

How to trigger an API every 3 seconds in the vue framework?

I am a vue beginner and would like to ask a question!
My English is not good but I try to describe my problem completely, thank you.
Currently I use vue to learn how to access the API, but I hope to be able to automatically touch the API again every 3 seconds to update the screen, but I really don’t know how to achieve this?
Hope to get your help, thank you again for watching my question.
My example

Add setInterval in created hook that calls the method that loads the data :
Vue.createApp({
data() {
return {
status: true,
data: [],
interval:null
};
},
methods: {
reNew() {
axios.get("https://randomuser.me/api/?results=5").then(
(response) =>
// console.log(response)
(this.data = response.data.results)
)
}
},
mounted() {
this.reNew()
},
created(){
this.interval = setInterval(() =>{
this.reNew()},3000)
},
destroyed(){
clearInterval(this.interval)
}
}).mount('#app');

You can use the setInterval method.
This would execute the function every 3 seconds.
setInterval(function(){
// fetch data...
}, 3000);

Nuxt handle redirect after deletion without errors : beforeUpdate direction not working?

So I have this nuxt page /pages/:id.
In there, I do load the page content with:
content: function(){
return this.$store.state.pages.find(p => p.id === this.$route.params.id)
},
subcontent: function() {
return this.content.subcontent;
}
But I also have an action in this page to delete it. When the user clicks this button, I need to:
call the server and update the state with the result
redirect to the index: /pages
// 1
const serverCall = async () => {
const remainingPages = await mutateApi({
name: 'deletePage',
params: {id}
});
this.$store.dispatch('applications/updateState', remainingPages)
}
// 2
const redirect = () => {
this.$router.push({
path: '/pages'
});
}
Those two actions happen concurrently and I can't orchestrate those correctly:
I get an error TypeError: Cannot read property 'subcontent' of undefined, which means that the page properties are recalculated before the redirect actually happens.
I tried:
await server call then redirect
set a beforeUpdate() in the component hooks to handle redirect if this.content is empty.
delay of 0ms the server call and redirecting first
subcontent: function() {
if (!this.content.subcontent) return redirect();
return this.content.subcontent;
}
None of those worked. In all cases the current page components are recalculated first.
What worked is:
redirect();
setTimeout(() => {
serverCall();
}, 1000);
But it is obviously ugly.
Can anyone help on this?

As you hinted, using a timeout is not a good practice since you don't know how long it will take for the page to be destroyed, and thus you don't know which event will be executed first by the javascript event loop.
A good practice would be to dynamically register a 'destroyed' hook to your page, like so:
methods: {
deletePage() {
this.$once('hook:destroyed', serverCall)
redirect()
},
},
Note: you can also use the 'beforeDestroy' hook and it should work equally fine.

This is the sequence of events occurring:
serverCall() dispatches an update, modifying $store.state.pages.
content (which depends on $store.state.pages) recomputes, but $route.params.id is equal to the ID of the page just deleted, so Array.prototype.find() returns undefined.
subcontent (which depends on content) recomputes, and dereferences the undefined.
One solution is to check for the undefined before dereferencing:
export default {
computed: {
content() {...},
subcontent() {
return this.content?.subcontent
👆
// OR
return this.content && this.content.subcontent
}
}
}
demo

Call API endpoint repeatedly in some pages for dispatch an Vuex action

I use NuxtJs Framework. I created an action to call endpoint and set it response's to store.
I want to call an Endpoint every 30 seconds in some of my dashboard pages. If the user navigates to pages that don't need the API call, I want to disable API call.
In my first try I use to implementing Interval in all pages I need API call data (This is work but I don't want to copy these codes in many of my components those need the API call data):
data: () => {
return {
getting: null,
};
},
computed: {
...mapActions({
myAction: "***name-of-action***",
}),
},
created() {
this.getData();
},
beforeDestroy() {
clearInterval(this.getting);
},
methods: {
getData() {
this.getting = setInterval(() => {
this.myAction()
}, 30000);
},
},
In my first try, I use a NuxtJs middleware and JavaScript Interval to dispatch the action, but when I navigate to pages that don't need the API call, it still calls the API (because JavaScript Interval needs be clear but Nuxt middleware don't have access to component lifecycle component destroy to clear the Interval)
export default (props) => {
setInterval(() => {
props.store.dispatch("***name-of-action***");
}, 3000);
};
I want to do the best practice for this problem.

I believe the less bad thing is to do a mixin which exposes 3 things:
startPolling() :
method that starts polling on the particular component
stopPolling() :
method that stops polling in the component
pollingprop() //name it as you see fit
computed property that always exposes the updated data, this data is calculated every time you make the call inside the mixin
(optional) hooks beforeRouteEnter() + beforeRouteLeave() docs
which automatically calls the this.startPolling() and the this.stopPolling()

For solving this problem I used mixin and it became a fine solution.
I create a mixin like this:
// intervalMixin.js
export default {
data: () => {
return {
getting: null,
};
},
computed: {
...mapActions({
myAction: "***name-of-action***",
}),
},
created() {
this.getData();
},
beforeDestroy() {
clearInterval(this.getting);
},
methods: {
getData() {
this.getting = setInterval(() => {
this.myAction()
}, 30000);
},
},
}
So I add this mixin to each component I want like this:
mixins: [intervalMixin],

Performance of using setInterval in Vue's mounted method?

I'm using the following code to show a datetime (using momentjs) that updates every second. I've read discussion about the performance issue's that may or may not be caused by setInterval and setTimeout.
Is this the most efficient way of going about this? What is thé common way to use intervals in single page applications?
export default {
name: 'app',
data () {
return {
dateTime: null
}
},
methods: {
updateTimer () {
this.dateTime = moment().format()
}
},
mounted () {
this.interval = setInterval(this.updateTimer, 1000)
}
}
The discussion can be found here:
https://forum.vuejs.org/t/basic-problem-making-a-clock-update-in-vue/642/14 (it is 3 years old now)

What is wrong with Vue and lodash debounce?

The props:
props: {
delay: Number,
}
The watcher:
watch: {
q: _.debounce(function() {
console.log(this.delay); // 500; always works fine, this.delay is here
}, this.delay) // never works;
},
If hardcode a delay (set 500 instead of this.delay - it works; otherwise - function not debounce).
What am I doing wrong? Thanks.

You won't be able to accomplish setting the delay there. this is not the component in that scope. You can use $watch instead inside a lifecycle hook:
created () {
this.debounceUnwatch = this.$watch('q', _.debounce(
this.someMethod,
this.delay
))
},
destroyed () {
// Removed the watcher.
this.debounceUnwatch()
},
For more information:
https://v2.vuejs.org/v2/api/#vm-watch
Edit
This doesn't work either. It just really seemed like it should have. What I think needs to be done here is you need to debounce whatever is updating q and not q itself.