vuex-extensions

:fire: HEADS UP! You're currently looking at Vuex-extensions 4 branch. If you're looking for Vuex 3, please check out master branch.

Reset function and Mixins option for Vuex

Vuex Extensions

Add Reset and Mixins function to Vuex

Resources

• Medium: Reset Vuex Modules to initial state
• Medium: How to use Mixins in Vuex

Install

You can install it via NPM

npm install vuex-extensions

or YARN

yarn add vuex-extensions

Usage

Check out the example on CodeSandbox.

Creating Vuex.Store

import { Store } from 'vuex'
import { createStore } from 'vuex-extensions'

export default createStore(Store, {
  plugins: []
  modules: {}
})

Mixins: adding some default getters/mutations/actions to all modules

    const store = createStore(Vuex.Store, {
      modules: {
        sub: {
          namespaced: true,
          state: {
            count: 0
          }
        }
      },
      mixins: {
        mutations: {
          changeState: function (state, changed) {
            Object.entries(changed)
              .forEach(([name, value]) => {
                state[name] = value
              })
          }
        }
      }
    })
    
    store.commit('sub/changeState', { count: 1 })

Store resets to initial State

import { useStore } from 'vuex'

// Vue composition
const store = useStore()
store.reset()

// Vue Component
this.$store.reset()

// Vuex action
modules: {
  sub: {
    actions: {
      logout() {
        this.reset()
      }
    }
  }
}

Reset with option

Assume: store has structure as:

root
  - state: { count: 0 }
  - modules:
    - child1
      - state: { count: 0 }
      - modules:
        - grandchild1 { state: { count: 0 } }
        - grandchild2 { state: { count: 0 } }
    - child1
      - state: { count: 0 }
      - modules:
        - grandchild1 { state: { count: 0 } }
        - grandchild2 { state: { count: 0 } }

After some actions, store has state:

{
  state: { count: 1 },
  child1: { 
    state: { count: 1 }
    grandchild1: { state: { count: 1 } }
    grandchild2: { state: { count: 1 } }
  },
  child1: {
    state: { count: 1 }
    grandchild1: { state: { count: 1 } }
    grandchild2: { state: { count: 1 } }
  }
}

// Reset root state only, all submodules are ingored
this.$store.reset({ self: true, nested: false })
// {
//   state: { count: 0 },
//   child1: { 
//     state: { count: 1 }
//     grandchild1: { state: { count: 1 } }
//     grandchild2: { state: { count: 1 } }
//   },
//   child1: {
//     state: { count: 1 }
//     grandchild1: { state: { count: 1 } }
//     grandchild2: { state: { count: 1 } }
//   }
// }

// Reset child1 and all it's sub modules, all other modules are ingored
this.$store.reset({ 
  self: false,
  nested: false, // if nested is not set (undefined), it will be equal to self
  modules: { child1: { self: true} }
})
// {
//   state: { count: 1 },
//   child1: { 
//     state: { count: 0 }
//     grandchild1: { state: { count: 0 } }
//     grandchild2: { state: { count: 0 } }
//   },
//   child1: {
//     state: { count: 1 }
//     grandchild1: { state: { count: 1 } }
//     grandchild2: { state: { count: 1 } }
//   }
// }

// Rest grandchild1 state only, all other modules are ingored
this.$store.reset({ 
  self: false,
  // nested: false,
  modules: { 
    child1: {
      modules: {
        grandchild1: { self: true }
      }
    } 
  }
})
// {
//   state: { count: 1 },
//   child1: { 
//     state: { count: 1 }
//     grandchild1: { state: { count: 0 } }
//     grandchild2: { state: { count: 1 } }
//   },
//   child1: {
//     state: { count: 1 }
//     grandchild1: { state: { count: 1 } }
//     grandchild2: { state: { count: 1 } }
//   }
// }