vuedraggable结合vuex使用

vuedraggable可以实现元素的拖拽功能，可以直接改变data中的数据，但无法直接改变vuex中的数据，需要先get再去set。对于动态组件的生成，如果单纯的只是用第一种计算方法，再使用v-model时就无法拖拽，所以需要使用第二种先get再set方法。

<draggable
  @update="endEvent"
  v-bind="dragOptions"
  v-model="pageInfo"
>
  <transition-group>
    <component
      :config="item"
      :is="item.name"
      :key="item.id"
      v-for="item in pageInfo"
    ></component>
  </transition-group>
</draggable>

import vuedraggable from "vuedraggable";
export default {
    
    
    data() {
    
    
        return {
    
    
            dragOptions: {
    
    
                animation: 500,
                filter: ".disabled",
            },
        };
    },
    components: {
    
    
        //调用组件
        vuedraggable,
    },
    computed: {
    
    
        //不应该直接这么写
        pageInfo() {
    
    
            return this.$store.state.pageInfo;
        },
        //而应该这样
        pageInfo: {
    
    
            get() {
    
    
                return this.$store.state.pageInfo
            },
            set(value) {
    
    
                this.$store.commit('updateInfo', value)
            }
        },
    }，
    methods: {
    
    
        endEvent(e) {
    
    
        	//拖拽完之后的回调函数
            console.log(this.pageInfo);
        },
    },
}