Vue

by Lardpower

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<div id="app">
  <div>
    <a href="#" @click.prevent="setValue()">Set value</a>
    <div><pre>{{ values }}</pre></div>
    <div>
    L3: <pre>{{ l3 }}</pre>
    </div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const store = new Vuex.Store({
  state: {
      l1: {
        l2: {
          l3: {
            l31: 100
          }
        }
      }
  },

  mutations: {
    setValuesMutation (state, data) {
    	// console.log('mutation', data);
      
      let a = _.merge({}, state, data);
      
     
      Object.assign(state, a);
      
      console.log(a);
      
      return true;
      

/*       let newState = {...state.root, ...data};  
      console.log('new state', newState); */
      
      console.log(Object.assign({}, state, data));
      
      Object.assign(state, Object.assign({}, data, state));
    }
  }
});

new Vue({
  el: "#app",
  store,
  data(){
  	return {};
  },
  computed:{
  	values(){
    	return this.$store.state;
    },
    l3(){
    	return this.$store.state.l1.l2.l3;
    }
  },
  
  methods: {
		setValue(){
    	this.$store.commit('setValuesMutation', {
      	l1: {l2: {l3: {l32: 200}}}
      });
    }
  }
})