Skip to content

Reset Vuex to initial state and supporting getters/mutations/actions mixins

License

Notifications You must be signed in to change notification settings

huybuidac/vuex-extensions

Repository files navigation


🔥 HEADS UP! You're currently looking at Vuex-extensions 1 branch. If you're looking for Vuex-extensions 4, please check out vuex4 branch.


vuex-extensions

Reset function and Mixins option for Vuex

npm npm npm

Vuex Extensions

Add Reset and Mixins function to Vuex

Resources

Install

You can install it via NPM

npm install vuex-extensions@1.2.2

or YARN

yarn add vuex-extensions@1.2.2

Usage

Check out the example on CodeSandbox.

Edit vuex-persistedstate

Creating Vuex.Store

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

export default createStore(Vuex.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

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