Executing a function after a return statement in Vue JS

Question

Executing a function after a return statement in Vue JS

I have a function that allows me to delete an account by calling the deleteAccount function. After successfully deleting the account, I would like the user to be automatically logged out from the vuex store. Although I currently use setTimeout as a workaround for this, I believe there may be a more efficient solution available. Can someone please recommend a better approach for achieving this logout functionality?

deleteAccount component

logout: function () {
    this.$store.commit(SET_LOGOUT);
    this.$store.commit(RESET_BASIC_MODAL_DATA);
    this.$router.push({name: ROUTE_NAMES_AUTH.LOGIN});
},
deleteAccount: function () {
    setTimeout(this.logout, 50);
    return this.$store.dispatch(DELETE_USER_ACCOUNT);
},

javascript vue.js ecmascript-6 vuejs2 vuex

Answer 1

Answer №1

When working with Vuex actions, they return a promise which allows you to utilize either then or await:

this.$store.dispatch(DELETE_USER_ACCOUNT).then(logout)
// or
deleteAccount: async function () {
  await this.$store.dispatch(DELETE_USER_ACCOUNT)
  logout()
}

Answer 2

When working with Vuex actions, they return a promise which allows you to utilize either then or await:

this.$store.dispatch(DELETE_USER_ACCOUNT).then(logout)
// or
deleteAccount: async function () {
  await this.$store.dispatch(DELETE_USER_ACCOUNT)
  logout()
}

Executing a function after a return statement in Vue JS

Answer №1

Similar questions

Ways To Obtain Trustworthy Dates Using JavaScript

What are some ways to improve performance in JavaScript?

Using Node to upload various large JSON files into mongoDB

Creating a modal form with jQuery in ASP.NET

Delaying http requests until cache is fully prepared without the need for constant checking

Node.js promises are often throwing Unhandled Promise Rejection errors, but it appears that they are being managed correctly

Typescript encountered an error indicating that the property "x" is nonexistent on the specified type of 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'

Uploading files with ASP.NET MVC 3 using a JSON model

Encountering a Typescript error while attempting to remove an event that has a FormEvent type

Ways to showcase tooltip text for an unordered list item?

Ensure modifications to a variable are restricted within an if statement

What is the significance of having a timer in a Redux reducer to prompt a re-rendering process?

What could be causing my JavaScript loop to replace existing entries in my object?

Is it possible to make the info box centered and adjust everything to seamlessly fit on all screen sizes?

Guide on incorporating jQuery library files into existing application code with the npm command

Next.js optimizes the page loading process by preloading every function on the page as soon as it loads, rather than waiting for them to

Dynamically injecting a JavaScript script within a Vue.js application

IE8 does not properly execute AJAX call to PHP file

Develop a function for locating a web element through XPath using JavaScriptExecutor

What is the most efficient way to transfer substantial data from a route to a view in Node.js when using the render method