JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<div id="app">
  <button @click="go">
    Go
  </button>
  <p>
    {{ projects }}
  </p>
</div>

JavaScript

const store = new Vuex.Store({
  state: {
    projects: [
      { tasks: [{start: 1, end: 2}, {start: 3, end: 4}] },
      { tasks: [{start: 1, end: 2}, {start: 3, end: 4}] },
      { tasks: [{start: 1, end: 2}, {start: 3, end: 4}] }
    ]
  },
  
  mutations: {
    updateStartEnd (state, { project, start, end }) {
      project.tasks.forEach(task => {
        task.start = start
        task.end = end
      })
    }
  },
  
  actions: {
    updateNow ({ commit }, project) {
      const start = Math.random()
      const end = Math.random()
      commit('updateStartEnd', { project, start, end })
    }
  }
})

new Vue({
  store,
  
  computed: {
    ...Vuex.mapState(['projects'])
  },
  
  methods: {
    go () {
      this.projects.forEach(project => {
      	this.$store.dispatch('updateNow', project)
      })
    }
  },
  
  watch: {
    projects: [
      {
        handler () {
        	console.log('watch!')
        }
      }, {
        deep: true,
        
        handler () {
          console.log('deep watch')
        }
      }    
    ]
  }
}).$mount('#app')