@repositoryname/vuex-generators

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>