From c62c930d1d3053f1913d0f00a9675a9683abc499 Mon Sep 17 00:00:00 2001
From: sphinxDevVic <sphinxVic@outlook.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 2795358..d0a9f88 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 d1b533f..7473b73 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 9928f0b..5a3cf8d 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)