Steps to trigger a mutation in the store every time the route is modified

Question

Steps to trigger a mutation in the store every time the route is modified

Is it possible to trigger a mutation in the store every time the route changes, without relying on a Vuex plugin to detect route/ mutations?

This scenario involves using vuex, nuxt, vue-router, and vue-router-sync.

Clarification: I am attempting to commit the mutation to a different part of the store, not just the route segment.

There are many inquiries about the opposite situation, but this question pertains to a unique scenario, so please consider this before marking it as a duplicate ;).

javascript vue.js vue-router vuex

Answer 1

Answer №1

To trigger a mutation, you can set up an afterEach listener on the router and invoke the mutation from there:

router.afterEach((to, from) => {
  store.commit('UPDATE_DATA', ...)
})

If you are working with Nuxt, you can try the following approach:

// plugins/trigger.js

export default ({ app: { router, store } }) => {
  router.afterEach((to, next) => {
    store.commit('UPDATE_DATA', ...)
  })
}

// nuxt.config.js

plugins: [
  '~/plugins/trigger'
]

Answer 2

To trigger a mutation, you can set up an afterEach listener on the router and invoke the mutation from there:

router.afterEach((to, from) => {
  store.commit('UPDATE_DATA', ...)
})

If you are working with Nuxt, you can try the following approach:

// plugins/trigger.js

export default ({ app: { router, store } }) => {
  router.afterEach((to, next) => {
    store.commit('UPDATE_DATA', ...)
  })
}

// nuxt.config.js

plugins: [
  '~/plugins/trigger'
]

Steps to trigger a mutation in the store every time the route is modified

Answer №1

Similar questions

Tips for Establishing Communication Between Two Dynamic Canvas Elements

Utilize a map image as a texture on a plane within a personalized shader in THREE.js

JavaScript inquiry

What is the best way to retrieve the latest prop from a parent component in Vue.js after invoking a method?

JavaScript Tutorial: Storing HTML Text in the HTML5 Local Storage

Loading HTML content in a WPF WebBrowser without encountering security messages

What is the best way to execute a script on the homepage just one time?

Step-by-step guide for setting up CodeMirror

Avoiding duplication of prints in EJS template files

Automatically append version number to requests to avoid browser caching with Gulp

Filling the void through webpack2 and the powerful webpack.LoaderOptionsPlugin

Eliminate any unnecessary tags located before the text

Transferring NodeJS information to JavaScript

Exploring the Wonders of React Memo

A method for utilizing wildcards in conjunction with the .load function

How can we develop a strategy to select products based on specific features while keeping costs minimized?

Avoiding redundant code in React Components: Best practices to keep your code DRY

Postman successfully validates the API, however, it experiences issues when run in Mocha JS

How can you enhance functionality in Polymer without the need to create a custom element?

Tips for bringing a particular tab into focus when a page initially loads