Skip to content

Latest commit

 

History

History
200 lines (175 loc) · 4.63 KB

README.md

File metadata and controls

200 lines (175 loc) · 4.63 KB

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