Vuex

by Alexey Ryazhskikh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/0.8.2/vuex.min.js"></script>
<div id="container">
  <ul>
    <li v-for="item in items">
      {{ item.id }} - {{ item.name }}
      <a v-on:click="delSomeItem(item)">DELETE</a>
    </li>
  </ul>
  <input v-model="product" v-on:keyup.enter="addSomeItem">
  <a href="#" v-on:click="start()">
    start
  </a>
</div>

JavaScript

// This call state data.
const state = {
  startTime: Date()
}

// This is look like events.
const mutations = {
  START (state) {
    state.startTime = new Date()
  } 
}

// This is store!!!.
const store = new Vuex.Store({
  state,
  mutations
})

 

// Vue 
const vm = new Vue({
	el: '#container',
  data: {
  	product: ''
  },
  store,
  vuex: {
  	// Data from vuex 
  	getters: {
    	count: function() {
      	return state.count
      },
      items: function(state) {
      	return state.product.items
      }
    },
    // Call action to dispatch 
    actions: {
    	increment,
      addItem: function(store, value) {
      	store.dispatch('ADDITEM', value)
      },
      delItem: function(store, item) {
      	store.dispatch('DELITEM', item)
      }
    }
  },
  methods: {
  	addSomeItem: function() {
    	this.addItem({
      	id: uid(), 
        name: this.product
      })
      this.product = '';
    },
    delSomeItem: function(item) {
    	this.delItem(item);
    }
  },
  computed: {
  		theItems: {
      	get() {
        	return this.items
        }
      }
  }
})