Vue /VueX/ Checkboxes (2)

by DvDty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<div id="app">
  <label>
    <input type='checkbox' v-model='people' value='jack' />
    Jack
  </label>
   <label>
    <input type='checkbox' v-model='people' value='raya' />
    Raya
  </label>
   <label>
    <input type='checkbox' v-model='people' value='terry' />
    Terry
  </label>
  <div>
    You have checked: {{ people }}
  </div>
</div>

Vue

const store = new Vuex.Store({
  state: {
    people: []
  },
  
  mutations: {
  	update_people (state, {newPeople}) {
    	state.people = [...newPeople]
    }
  },
})

new Vue({
  el: "#app",
  store: store,
  computed: {
    people: {
      async set(newPeople){
      	let apiSuccessfulResponse = await new Promise((resolve, reject) => {
        	reject(false)
        })

        if (apiSuccessfulResponse) {
        	this.$store.commit('update_people', {newPeople})
        }
      },

      get() { 
      	return this.$store.state.people
      }
    }
 },
})