vuex all pluha

by simati

HTML

<script src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<div id="app">
  <h1>Vue Draggable </h1>     {{getShow}} 
  <div class="drag" > 
    <h2>List 1 Draggable</h2>
     <div v-show="getShow">
      <draggable v-model="list" class="dragArea" :options="{group:{ name:'people',  pull:'clone', put:false }}" :move="hide" @end="show">
        <div v-for="(element, index) in list" :key="index">{{element.name}}</div>
      </draggable>
      </div>
    <h2>List 2 Draggable</h2>
     
      <draggable v-model="list2" class="dragArea" :options="{group:'people'}">
        <div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
      </draggable>
  </div>
  
     <div class="normal">
            <h2>List 1 v-for</h2>
            <div>
                <div v-for="element in list">{{element.name}}</div>
             </div>

            <h2>List 2 v-for</h2>
            <div>
                <div v-for="element in list2">{{element.name}}</div>
            </div>
        </div>
</div>

CSS

.normal {
  background-color: grey;
}

.drag {
  background-color: green;
}

.dragArea {
  min-height: 10px;
}

JavaScript

const actions = {
    hide ({ commit }) {
    commit('SET_SHOW', { amount: false })
    console.log(store.state.show)
  },
  show ({ commit }) {
    commit('SET_SHOW', { amount: true })
    console.log(store.state.show)
  }
	}

const getters = {
	getShow: state => {
      return state.show
    }
}

const  mutations = {
    SET_SHOW (state, payload) {
  	state.show = payload.amount
  }
  }

const state = {
    show:  true
    }

const store = new Vuex.Store({ state, actions, mutations, getters })


var vm = new Vue({
  el: "#app",
  store,
  data: {
  	someName: 'Griwa',
    list: [{
      name: "John"
    }, {
      name: "Joao"
    }, {
      name: "Jean"
    }],
    list2: [{
      name: "Juan"
    }, {
      name: "Edgard"
    }, {
      name: "Johnson"
    }]
  },
  computed: Vuex.mapGetters(['getShow']),
  methods: Vuex.mapActions(['hide', 'show']),
  mounted () {
  console.log(store.state.show)
  }
});