Vuex function getter

by luckylooke

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<div id="vue">
  <div>
    <h2>Search:</h2>
    <input v-model="search">
    <div v-for="item in filteredStuff">{{item}}</div>
  </div>
  <div>
    <h2>Edit:</h2>
    <input
      v-for="item, i in $store.state.stuff"
      :value="item"
      @input="$store.commit('setStuff', [i, $event.target.value])">
  </div>
</div>

CSS

#vue{
  display:flex;
}
#vue > div {
  padding:10px;
  margin:10px;
  border:1px solid grey;
}
h2{
  margin:0;
}
input{
  display:block;
}

JavaScript

const store = new Vuex.Store({
	state:{
  	stuff:['lorem','ipsum','dolor','sit','amet','consectetur','adipisinc','elit']
  },
  mutations:{
  	setStuff(state, [index, val]){
    	Vue.set(state.stuff, index, val)
    }
  },
  getters:{
  	filteredStuff: state => search => state.stuff.filter(item => item.includes(search))
  }
})

new Vue({
	el:'#vue',
  store,
  data(){
  	return {
    	search:''
    }
  },
  computed:{
  	filteredStuff(){
    	return this.$store.getters.filteredStuff('lo')
    }
  }
})