I'm using vedraggable, so I have two draggables on the page, one to clone and the other that just receives the clone.
The draggable that receives has a @change, calling a method that changes a vuex variable with the value of this component's variable. This vuex variable is only receiving the value, it is not used. When it is changed the first time, it works, the second time the error '[vuex] do not mutate vuex store state outside mutation handlers.'
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div class="d-flex">
<draggable
:list="lista"
:group="{ name: 'people', pull: 'clone', put: false }"
@start="drag = true"
@end="drag = false"
>
<div class="element" v-for="(element, index) in lista" :key="index">
{{ element.name }}
</div>
</draggable>
<draggable
class="ml-5"
:list="lista3"
group="people"
@change="muda"
@start="drag = true"
@end="drag = false"
>
<div class="element" v-for="(element, index) in lista3" :key="index">
{{ element.name }}
</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import { mapMutations } from 'vuex';
export default {
components: {
draggable,
},
data(){
return{
lista: [
{
id: 1,
name: "Teste 1",
},
{
id: 2,
name: "Teste 2",
},
],
lista3: []
}
},
methods: {
...mapMutations(['SET_LISTA_PESSOAS']),
muda(){
this.SET_LISTA_PESSOAS(this.lista3)
console.log(this.$store.state.listaPessoas)
},
},
}
</script>
Vuex
export const state = () => ({
listaPessoas: [],
})
export const mutations = {
SET_LISTA_PESSOAS(context, payload){
context.listaPessoas = payload
},
}