Vuex

Vuex

by Hristiyan Dodov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
<div id="example">
  <p v-for="(item, key) in data.pages">
    {{ item }}
    <button @click="deleteProp(key)">
      delete
    </button>
  </p>
</div>
<script src="https://cdn.jsdelivr.net/g/[email protected],[email protected]"></script>

JavaScript

const module =  {
  state: {
    exportData: null
  },
  mutations: {
    setData (state, value) {
      state.exportData = value
    }
  }
}

const store = new Vuex.Store({
  modules: {
  	exporter: module
  }
})

new Vue({
  store,
  el: '#example',
  computed: {
    data() {
      return this.$store.state.exporter.exportData
    }
  },
  methods: {
  	deleteProp (key) {
    console.log('delete', key)
    	/*var clone = _.cloneDeep(this.data)
      delete clone.pages[key]
      this.$store.commit('setData', clone)*/
    	this.$delete(this.data.pages, key)
    }
  },
  created () {
  	setTimeout(() => {
    	this.$store.commit('setData', {
      	pages: {
        	'blog\/foo': 'foo',
          'blog\/bar': 'baz',
          'blog\/qux': 'qux'
        }
      })
    }, 200)
  }
})