From a39d0767e4041cdd5cf8050774106c01d39024e0 Mon Sep 17 00:00:00 2001
From: Denis Karabaza <denis.karabaza@gmail.com>
Date: Thu, 23 Apr 2020 15:10:05 +0300
Subject: [PATCH] fix: Prepend devtool handler (#1358)

* Add prepend option to subscribe

* Prepend devtools subscribe handler to fix vuejs/vue-devtools#678

Co-authored-by: Katashin <ktsn55@gmail.com>
---
 docs/api/README.md     | 16 ++++++++++++++--
 src/plugins/devtool.js |  4 ++--
 src/store.js           | 14 ++++++++------
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/docs/api/README.md b/docs/api/README.md
index 279535855..d0a9f8889 100644
--- a/docs/api/README.md
+++ b/docs/api/README.md
@@ -174,7 +174,7 @@ const store = new Vuex.Store({ ...options })
 
 ### subscribe
 
--  `subscribe(handler: Function): Function`
+-  `subscribe(handler: Function, options?: Object): Function`
 
   Subscribe to store mutations. The `handler` is called after every mutation and receives the mutation descriptor and post-mutation state as arguments:
 
@@ -185,13 +185,19 @@ const store = new Vuex.Store({ ...options })
   })
   ```
 
+  By default, new handler is added to the end of the chain, so it will be executed after other handlers that were added before. This can be overriden by adding `prepend: true` to `options`, which will add the handler to the beginning of the chain.
+
+  ``` js
+  store.subscribe(handler, { prepend: true })
+  ```
+
   To stop subscribing, call the returned unsubscribe function.
 
   Most commonly used in plugins. [Details](../guide/plugins.md)
 
 ### subscribeAction
 
--  `subscribeAction(handler: Function): Function`
+-  `subscribeAction(handler: Function, options?: Object): Function`
 
   > New in 2.5.0
 
@@ -204,6 +210,12 @@ const store = new Vuex.Store({ ...options })
   })
   ```
 
+  By default, new handler is added to the end of the chain, so it will be executed after other handlers that were added before. This can be overriden by adding `prepend: true` to `options`, which will add the handler to the beginning of the chain.
+
+  ``` js
+  store.subscribe(handler, { prepend: true })
+  ```
+
   To stop subscribing, call the returned unsubscribe function.
 
   > New in 3.1.0
diff --git a/src/plugins/devtool.js b/src/plugins/devtool.js
index d1b533fbf..7473b73d8 100644
--- a/src/plugins/devtool.js
+++ b/src/plugins/devtool.js
@@ -18,9 +18,9 @@ export default function devtoolPlugin (store) {
 
   store.subscribe((mutation, state) => {
     devtoolHook.emit('vuex:mutation', mutation, state)
-  })
+  }, { prepend: true })
 
   store.subscribeAction((action, state) => {
     devtoolHook.emit('vuex:action', action, state)
-  })
+  }, { prepend: true })
 }
diff --git a/src/store.js b/src/store.js
index 9928f0b32..5a3cf8da9 100644
--- a/src/store.js
+++ b/src/store.js
@@ -164,13 +164,13 @@ export class Store {
     })
   }
 
-  subscribe (fn) {
-    return genericSubscribe(fn, this._subscribers)
+  subscribe (fn, options) {
+    return genericSubscribe(fn, this._subscribers, options)
   }
 
-  subscribeAction (fn) {
+  subscribeAction (fn, options) {
     const subs = typeof fn === 'function' ? { before: fn } : fn
-    return genericSubscribe(subs, this._actionSubscribers)
+    return genericSubscribe(subs, this._actionSubscribers, options)
   }
 
   watch (getter, cb, options) {
@@ -238,9 +238,11 @@ export class Store {
   }
 }
 
-function genericSubscribe (fn, subs) {
+function genericSubscribe (fn, subs, options) {
   if (subs.indexOf(fn) < 0) {
-    subs.push(fn)
+    options && options.prepend
+      ? subs.unshift(fn)
+      : subs.push(fn)
   }
   return () => {
     const i = subs.indexOf(fn)