Dynamically populate Vuex state

Question

I need to load a different version of state based on a data variable in the root component.

App.vue:

export default {
  store : store,
  name: 'app',
  data() {
    clientId : 1  
  }
}

store.js:

export const store = new Vuex.Store({
  state : {
    clientConfig : clientConfig
});

And the clientConfig would be store in a separate file.

What is the best way to achieve a dynamic/programmatic loading of the Vuex state based on some input to the initial Vuejs App?

Thanks!

One solution is load all clientConfig to your store, and use getters to get config corresponding to clientId — ittus
yes, but then the whole app would be full of if client = x {get.config.a} right or am I missing something? — dendog
You can store clientId in vuex also. Then just read data from vuex store — ittus

ittus ittus · Accepted Answer · 2018-05-17T14:50:25

Here is 1 possible solution:

export const store = new Vuex.Store({
  state : {
    clientConfigs :{
      "1": clientConfig1,
      "2": clientConfig2
    },
    clientId: "1"
  },
  getters: {
    currentClientConfig: state => {
      return state.clientConfigs[state.clientId]
    }
  },
  mutations: {
   setClientId (state, newValue) {
     state.clientId = newValue
   }
  }
});

and in your component, you can access config by this.$store.getters.currentClientConfig

To update clientId, you can use mutations. In component, you can use this.$store.commit('setClientId', yourNewClientId)

Dynamically populate Vuex state

1 Answers