Vuex: Programmatically create getters and setters for defined store properties

Created on 15 May 2018 · 3Comments · Source: vuejs/vuex

What problem does this feature solve?

Tedious boilerplate is currently required to create a store property with vanilla getters and setters. EG

const createStore = () => new Vuex.Store({
  state: {
    version: null,
  },
  getters: {
    version(state){
        return state.version;
    }
  },
  setters: {
    setVersion(state, version){
      state.version = version;
    }
  }
}

I don't currently understand the life cycle or structure of the store well enough to programmatically add getters and setters. Naively, I tried implementing a module to automatically generate a getters object to inject into the store something like this:

export default (state) => {
  return Object.keys(state)
    .reduce((getters, key) => {
      getters[key] = function(state){ return state[key]};
      return getters;
    }, {});
};

This didn't work, and I'm not sure how to proceed, but it seems like providing vanilla getters and setters that are a function of the property name, but could be overridden with an explicit implementation would make Vuex development friendlier and faster.

This idea could be extended to mutations.

Please feel free to point out problems with this idea or my understanding of the store, or even better, that someone has already implemented it and where!

What does the proposed API look like?

No visible changes to the current store creation API would be required. Any store key defined in the state object on store creation would generate getters and setters on store creation.

Source

matthewmorgan

👍6

Most helpful comment

Update: I have created a pattern where I can do this fairly painlessly without changes to Vuex itself.

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
import initialState from './initialState';


Vue.use(Vuex);

export default () => new Vuex.Store({
  state: initialState,
  mutations,
  actions,
  getters: {...getters(initialState),}  // can add more complex getters (EG filtered or mapped) after the comma
});

getters.js

// creates getters based on store keys
export default (state) => {
  return Object.keys(state)
    .reduce((getters, key) => {
      getters[key] = (state) => state[key];
      return getters;
    }, {});
};

initialState.js

export default {
  foo: 'bar'
}

I would be happy to close this PR, maybe there's no need for a change to the library. Let me know.

matthewmorgan on 9 Jun 2018

👍7

All 3 comments

Update: I have created a pattern where I can do this fairly painlessly without changes to Vuex itself.

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
import initialState from './initialState';


Vue.use(Vuex);

export default () => new Vuex.Store({
  state: initialState,
  mutations,
  actions,
  getters: {...getters(initialState),}  // can add more complex getters (EG filtered or mapped) after the comma
});

getters.js

// creates getters based on store keys
export default (state) => {
  return Object.keys(state)
    .reduce((getters, key) => {
      getters[key] = (state) => state[key];
      return getters;
    }, {});
};