@repositoryname/vuex-generators v1.1.2
vuex-generators
Generator functions for simple vuex store interactions.
generateSimpleGetters
Returns an object of simple getters for a state object, where simple means that they will just return an entry for any key.
For example, given a state object {key: value}
, an object {key: state => state[key]}
will be returned.
This is useful to avoid writing basic operations.
generateSimpleMutations
Returns an object of simple mutations for a state object, where simple means that they will just replace an entry for any key.
For example, given a state object {key: value}
, an object {setKey: (state, payload) => state[key] = payload}
will be returned.
This is useful to avoid writing basic operations.
getSetGenerator
Prepares a vuex store variable to be usable as v-model
, assuming that a fitting mutation (e.g. generated by generateSimpleMutations
) exists. Use within Vue component as either getSetGenerator(['varName'])
for root store or getSetGenerator('moduleName', ['varName'])
for any nested module.
Usage examples
import { generateSimpleGetters, generateSimpleMutations } from '@repositoryname/vuex-generators'
const initialState = {
example: 'value',
exampleToo: 'Two'
}
// generate getters example, exampleToo
const simpleGetters = generateSimpleGetters(initialState)
// generate mutations setExample, setExampleToo
const simpleMutations = generateSimpleMutations(initialState)
// getters object can be extended - this pattern comes in handy
export const getters = {
...simpleGetters,
other: ({example}) => example.toUpperCase()
}
// same pattern allows overriding simple mutations in case they do something later
export const mutations = {
...simpleMutations,
setExample: (state, payload) => state.example = payload.toLowerCase()
}
<template>
<!-- fictional component -->
<InputRange v-model="red" />
<InputRange v-model="green" />
<InputRange v-model="blue" />
</template>
<script>
// in a vue component
import { getSetGenerator } from '@repositoryname/vuex-generators'
export default {
computed: {
...getSetGenerator('paletteModule', ['red', 'green', 'blue'])
}
}
</script>