Nuxtjs中使用vuedraggable触发Vuex状态修改异常问题

问题场景 #

使用vuedraggable实现克隆拖拽功能：左侧组件负责克隆元素，右侧组件接收克隆后的元素。右侧组件绑定@change事件，将组件内的lista3数组赋值给Vuex的listaPessoas变量。首次操作功能正常，但第二次触发拖拽时出现错误：[vuex] do not mutate vuex store state outside mutation handlers.

错误原因 #

第一次调用SET_LISTA_PESSOAS时，直接将lista3的数组引用赋值给了Vuex的listaPessoas，导致两者指向同一个内存地址的数组。后续vuedraggable对lista3进行拖拽修改时，本质是直接修改了Vuex中listaPessoas指向的数组，绕过了mutation处理机制，触发了Vuex的报错。

解决方案 #

方案1：在Vuex的mutation中创建新数组，切断引用 #

修改mutation逻辑，通过扩展运算符或slice()创建新数组，避免和组件内的数组共享引用：

export const state = () => ({
  listaPessoas: [],
})

export const mutations = {
  SET_LISTA_PESSOAS(context, payload){
    // 创建新数组，切断原引用
    context.listaPessoas = [...payload]
    // 也可以使用slice()：context.listaPessoas = payload.slice()
  },
}

方案2：在组件传递参数时传递数组副本 #

在组件的muda方法中，传递lista3的副本给mutation，而非原数组：

methods: {
    ...mapMutations(['SET_LISTA_PESSOAS']),

    muda(){
        // 传递数组副本，避免引用共享
        this.SET_LISTA_PESSOAS([...this.lista3])
        console.log(this.$store.state.listaPessoas)
    },
}

额外优化建议 #

组件内循环尽量使用元素的唯一ID作为key，避免拖拽时出现渲染异常：

<!-- 左侧draggable的循环 -->
<div class="element" v-for="(element, index) in lista" :key="element.id">
    {{ element.name }}
</div>

<!-- 右侧draggable的循环 -->
<div class="element" v-for="(element, index) in lista3" :key="element.id">
    {{ element.name }}
</div>

内容的提问来源于stack exchange，提问作者GobsRuiz