Vuex listener

A global Vuex listener plugin

Version: 1.2.0 Updated: 10/12/2020

By: kiyui License: MIT

Downloads Last 30 Days: 35


npm i vuex-listener
yarn add vuex-listener






Build Status JavaScript Style Guide

A global Vuex action and mutation listener plugin, for optimisation purposes.


The Vuex.Store instance provides subscribe and subscribeAction methods, but every invocation of this method sets up another global listener that listens to every single mutation and action.

This plugin provides a $storeListener singleton such that all listeners are dispatched from a single source.


Check out the demo on StackBlitz.


# requires vuex@^3.1.0
npm install --save vuex-listener@latest

vuex-listener exposes both the Vue plugin as well as the underlying Listener class for maximum flexibility.

as global plugin

import Vue from 'vue'
import Vuex from 'vuex'
import { VuexListener } from 'vuex-listener'


interface State {

const store = new Vuex.Store<State>({

const vm = new Vue({
  created () {
    this.$storeListener.addMutationListener('MUTATION', (payload: any, state: State) => {
      // do your thing

as a standalone class

You can use the exported Listener class over your global Vuex.Store instance:

import Vuex from 'vuex'
import { Listener } from 'vuex-listener'

const store = new Vuex.Store<State>({ ...etc })
const listener = new Listener<State>(store)

The Listener class can be used as a standalone class in your component:

import { Vue, Component } from 'vue-property-decorator'
import { Listener } from 'vuex-listener'

export default class ExampleComponent extends Vue {
  private listener: Listener<State>
  private unsubscribers: Array<Function>

  public created () {
    this.listener = new Listener(this.$store)
    this.unsubscribers = []

    this.unsubscribers.push(this.listener.addMutationListener('MUTATION', (payload: any, state: State) => {
      // do your thing

  public beforeDestroy () {
    this.unsubscribers.forEach((unsub) => unsub())

as a vuex plugin

import Vuex from 'vuex'
import { VuexListener } from 'vuex-listener'

function VuexListenerPlugin (store) {
  const listener = new Listener(store)
  // do your thing

const store = new Vuex.Store({
  plugins: [VuexListenerPlugin]


The Listener class exposes 3 methods:

type addMutationListener = (mutation: string, (payload: any, state: S)) => UnsubscribeFn
type addBeforeActionListener = (action: string, (payload: any, state: S)) => UnsubscribeFn
type addAfterActionListener = (action: string, (payload: any, state: S)) => UnsubscribeFn

Each method returns an UnsubscribeFn that can be used to remove a particular listener.

Categories: Vue js