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'] })
yarn add unholy
Add to the modules
section of your nuxt.config.js
:
export default {
modules: ['unholy']
}
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.
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 the original @nuxt/vue-app
store 😈