JSFiddle - React, Tailwind, and code Playground

by Lardpower

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

JavaScript

const vuexTelephonyModule = {
      state: {
        moduleItem1: 'val 1.1',
        moduleItem2: 'val 1.2'
      }
    };

    const store = new Vuex.Store({
      modules: {
        telephony: vuexTelephonyModule
      },

      state: {
        topItem1: 'val 1'
      },


      mutations: {
        topLevel(state, payload) {
          let moduleName = _.get(payload, 'module', false);
          let stateToUpdate = !moduleName ? state : _.get(state, moduleName);
          let updateMethod = 'replace';

          _.each(_.get(payload, 'items', {}), (v, k) => {
            switch (updateMethod) {
              case 'replace':
                _.set(stateToUpdate, k, v);
                break;
            }
          });


        }
      }
    });

    console.log(_.get(store, 'state.telephony.moduleItem1', null));
    console.log(_.get(store, 'state.topItem1', null));

    store.commit('topLevel', {
      module: 'telephony',
      items: {
        moduleItem1: 'updated value'
      }
    });

	  // update top level field
    store.commit('topLevel', {
      items: {
        topItem1: 'Top Level Value'
      }
    });
		
    console.log('+===+');

    console.log(_.get(store, 'state.telephony.moduleItem1', null));
    console.log(_.get(store, 'state.topItem1', null));