unholy

A Nuxt.js module that injects a $state helper for performing core data mutations on the Vuex store.

Works with Nuxt.js 2.5 and above.

$state[.submodule].merge: merges object into state, overriding existing values

this.$state.merge({
  propInState: {
    toBeUpdated: 2
  }
})

$state[.submodule].anull: set properties in the state to null

// Set single prop to null
this.$state.anull('prop')
 
// Set top-level props to null
this.$state.anull('prop', 'otherProp', ...)
 
// Set obj props to null
this.$state.anull({ obj: ['prop', 'otherProp', ...] })

$state[.submodule].push: push values into state arrays

this.$state.push({
  arrayInState: {
    toReceiveItems1: [2, 3] // push(2, 3)
    toReceiveItems2: ['a', 'b'] // push('a', 'b')
  }
})

$state[.submodule].splice: perform Array.splice() on state arrays

this.$state.splice({
  arrayInState: {
    toHaveSplicedItems: [0, 2] // splice args
  }
})

$state[.submodule].empty: remove all items from arrays

this.$state.empty('arrayInState', 'anotherArrayInState', ...)
 
this.$state.empty({ obj: ['arrayInObj', 'anotherArrayInObj'] })

Installation

yarn add unholy

Setup

Add to the modules section of your nuxt.config.js:

export default {
  modules: ['unholy']
}

Upgrade from 0.9

The latest version of unholy is a major release: 1.0.0.

The 0.9 release (which overrides Vuex.Store.commit()) for merging objects remains available on npm.

Upgrading to 1.0 is strongly recommended.

Why "unholy"?

Because somewhere in the source code, you'll find this:

const vueAppPath = require.resolve('@nuxt/vue-app')
const vueAppDistSuffixLen = p('/dist/vue-app.js').length
const vueAppStoreBase = vueAppPath.slice(0, vueAppPath.length - vueAppDistSuffixLen)
const createStoreRegex = /\/\/ createStore[\0-\uFFFF]+?\}\n/

Which is used for tampering with @nuxt/vue-app original store 😈

Credits

• Jonas Galvez (@galvez)
• Pooya Parsa (@pi0)