fix: Prepend devtool handler (#1358)

* Add prepend option to subscribe

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

Co-authored-by: Katashin <[email protected]>

Author: simplesmiler

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

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 })
 }

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)