Vuex: Subscribing to store mutations in Vue components

Created on 19 Jun 2016 · 10Comments · Source: vuejs/vuex

It would be nice to add mutation listeners from a Vue component. Something like store.subscribe does in Redux. Right now it is only possible with middlewares but these can only be added with the Vuex.Store constructor.

Im thinking of adding a option called subscribe which can be defined in a component.

vuex: {
  getters: {},
  actions: {},
  subscribe: function (mutation, state, store) {
      // listener code ...
  }
}

Source

steffans

Most helpful comment

With 1.0/2.0 you can just do this.$store.subscribe((mutation, state) => ...)

yyx990803 on 5 Jul 2016

👍7

All 10 comments

What is the use case for this?

yyx990803 on 23 Jun 2016

This is useful in order to listen to mutations and do something which is not user interface related since this happens through the getters. For example sending an http request or save an certain state of a variable for undo/redo.

steffans on 25 Jun 2016

I think this should kind of belong into actions, doesn't it?

I know, vuex action should have no side-effects, but having another source of "actions" feels wrong to me. It feels like watchers in components, which in 99% of situations are not really the best solution anyways.

Thinking about it, wouldn't watchers on getters be able to do this job for the most part, if you want to keep it out of actions?

LinusBorg on 28 Jun 2016

With 1.0/2.0 you can just do this.$store.subscribe((mutation, state) => ...)

yyx990803 on 5 Jul 2016

👍7

@yyx990803 Thanks for your effort! I just started to work with Vuex 2.0

steffans on 6 Jul 2016

How do you unsubscribe an handler?

mrdezzods on 31 Jan 2017

@mrdezzods store.subscribe returns an unsubscribe function.

yyx990803 on 31 Jan 2017

👍1

Oh Okey. I was actually going to maken a pull request for that, but I got my answer now 👍

mrdezzods on 31 Jan 2017

@yyx990803
Can you give a clear example of how to unsubscribe to store mutations, I can't find unsubscribe in the source code of vuex, also can't figure how to unsubscribe. using vuex V2.2.1. Thank You

ramakrishnamundru on 7 Apr 2017

Hello ..

Thank your for your interest in this project.

This is a closed issue. Furthemore, your issue is a usage/support question, and the issue tracker is reserved exclusively for bug reports and feature requests (as outlined in our Contributing Guide).

We encourage you to ask it on the forum , Stack Overflow or on gitter and are happy to help you out there.

LinusBorg on 7 Apr 2017

Was this page helpful?

0 / 5 - 0 ratings