完成vuex转换

 <template>
   <div id="app">
     <setting/>
-    <!-- <layout/> -->
+    <layout/>
   </div>
 </template>
 
 <script>
 import setting from "./components/setting";
-// import layout from "./components/layout";
+import layout from "./components/layout";
 
 export default {
   name: "app",
   components: {
     setting,
-    // layout
+    layout
   },
   mounted() {
     this.$inventory
@@ -27,7 +27,7 @@ export default {
               "dashboard!name!home": {}
             })
             .then(detail => {
-              this.$store.commit("setDashboardId", detail.id);
+              this.$store.commit("layout/setDashboardId", detail.id);
             });
         } else {
           this.$store.commit(
@@ -36,16 +36,6 @@ export default {
           );
         }
       });
-  },
-  methods: {
-    // isLock: function(val) {
-      // this.$store.commit("setLock", detail.id);
-    // this.isDraggable = val.isDraggable;
-    // this.isResizable = val.isResizable;
-    // this.$message.success(
-    //   val.isResizable && val.isDraggable ? "编辑已解锁" : "编辑已锁定"
-    // );
-    // }
   }
 };
 </script>

@@ -5,15 +5,10 @@
         size="small"
         shape="circle"
         icon="close"
-        @click="close"
-        v-show="this.$store.state.layout.isDraggable&&this.$store.state.layout.isResizable"
-      ></a-button>
-      <a-button
-        size="small"
-        shape="circle"
-        icon="setting"
-        v-show="this.$store.state.layout.isDraggable&&this.$store.state.layout.isResizable"
+        @click="close(index)"
+        v-show="this.$store.state.layout.isLock"
       ></a-button>
+      <a-button size="small" shape="circle" icon="setting" v-show="this.$store.state.layout.isLock"></a-button>
     </div>
     <component :is="layout.name" :isConfig="isConfig"></component>
   </div>
@@ -30,12 +25,12 @@
 </style>
 
 <script>
+import { mapMutations } from "vuex";
+
 export default {
   props: {
     layout: Object,
-    index: Number,
-    // isDraggable: Boolean,
-    // isResizable: Boolean
+    index: Number
   },
   data() {
     return {
@@ -43,9 +38,9 @@ export default {
     };
   },
   methods: {
-    close: function() {
-      this.$emit("close", this.index);
-    }
+    ...mapMutations({
+      close: "layout/delLayout"
+    })
   }
 };
 </script>

@@ -3,8 +3,8 @@
     :layout.sync="this.$store.state.layout.layout"
     :col-num="100"
     :row-height="30"
-    :is-draggable="this.$store.state.layout.isDraggable"
-    :is-resizable="this.$store.state.layout.isResizable"
+    :is-draggable="this.$store.state.layout.isLock"
+    :is-resizable="this.$store.state.layout.isLock"
     :is-mirrored="false"
     :vertical-compact="true"
     :margin="[0, 0]"
@@ -23,7 +23,7 @@
       :maxH="item.maxH"
       :key="item.i"
     >
-      <gridComponent :layout="item" :index="index" @close="close"/>
+      <gridComponent :layout="item" :index="index"/>
     </grid-item>
   </grid-layout>
 </template>
@@ -36,11 +36,6 @@ export default {
     GridLayout: VueGridLayout.GridLayout,
     GridItem: VueGridLayout.GridItem,
     gridComponent
-  },
-  methods:{
-    close:function(val){
-      // this.layout.splice(val,1)
-    }
   }
 };
 </script>

@@ -5,19 +5,20 @@
       shape="circle"
       icon="plus"
       @click="() => visible = true"
-      v-show="this.$store.state.layout.isDraggable&&this.$store.state.layout.isResizable"
+      v-show="this.$store.state.layout.isLock"
     ></a-button>
     <a-button
       size="small"
       shape="circle"
       icon="lock"
-      @click="isLock(!this.$store.state.layout.isDraggable)"
+      @click="isLock"
     ></a-button>
     <a-modal
       title="添加小部件"
       centered
       v-model="visible"
       @ok="add"
+      @cancel="cancel"
       :destroyOnClose="true"
       :maskClosable="false"
       :okButtonProps="{ props: {disabled: selectItem===null?true:false} }"
@@ -48,7 +49,6 @@
 
 
 <script>
-import { mapMutations } from "vuex";
 export default {
   data() {
     return {
@@ -59,9 +59,6 @@ export default {
     };
   },
   methods: {
-    ...mapMutations({
-      isLock: "setLock"
-    }),
     filterOption(input, option) {
       return (
         option.componentOptions.children[0].text
@@ -78,8 +75,20 @@ export default {
       }
     },
     add: function() {
-      this.$store.commit("setLatout", this.selectItem);
+      this.$store.commit("layout/addLayout", this.selectItem);
       this.visible = false;
+      this.selectItem = null;
+      this.configSelect = null;
+    },
+    cancel: function() {
+      this.selectItem = null;
+      this.configSelect = null;
+    },
+    isLock: function() {
+      this.$store.commit("layout/setLock", !this.$store.state.layout.isLock);
+      this.$message.success(
+        this.$store.state.layout.isLock ? "编辑已解锁" : "编辑已锁定"
+      );
     }
   }
 };

 const state = {
   layout: [],
-  isDraggable: true,
-  isResizable: true,
-  dashboardId: null,
+  isLock: true,
+  dashboardId: null
 };
 
 const mutations = {
@@ -10,23 +9,25 @@ const mutations = {
     state.dashboardId = id;
   },
   setLock(state, value) {
-    state.isDraggable = value;
-    state.isResizable = value;
+    state.isLock = value;
   },
-  setLatout(state, name) {
+  addLayout(state, name) {
     state.layout.push({
-        x: 0,
-        y: 0,
-        w: 10,
-        h: 2,
-        i: state.layout.length + 1,
-        name
+      x: 0,
+      y: 0,
+      w: 10,
+      h: 2,
+      i: state.layout.length + 1,
+      name
     });
   },
+  delLayout(state, index) {
+    state.layout.splice(index, 1);
+  }
 };
 
 export default {
   namespaced: true,
   state,
-  mutations,
+  mutations
 };

@@ -11,11 +11,7 @@
 </style>
 
 <script>
-import config from "./config";
 export default {
   name: "index1",
-  components: {
-    config
-  }
 };
 </script>