vuex替换props

@@ -5187,14 +5187,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5209,20 +5207,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5339,8 +5334,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5352,7 +5346,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5367,7 +5360,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5375,14 +5367,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5401,7 +5391,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5482,8 +5471,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5495,7 +5483,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5617,7 +5604,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -10994,6 +10980,11 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuex": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
+      "integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg=="
+    },
     "warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",

@@ -15,7 +15,8 @@
     "less-loader": "^4.1.0",
     "lodash": "^4.17.11",
     "vue": "^2.6.6",
-    "vue-grid-layout": "^2.3.4"
+    "vue-grid-layout": "^2.3.4",
+    "vuex": "^3.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.5.0",

 <template>
   <div id="app">
-    <setting
-      :layout="layout"
-      :isDraggable="isDraggable"
-      :isResizable="isResizable"
-      @isLock="isLock"
-    />
-    <layout :layout="layout" :isDraggable="isDraggable" :isResizable="isResizable"/>
+    <setting/>
+    <!-- <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
@@ -32,29 +27,25 @@ export default {
               "dashboard!name!home": {}
             })
             .then(detail => {
-              this.id = detail.id;
+              this.$store.commit("setDashboardId", detail.id);
             });
         } else {
-          this.id = list.managedObjects[0].id;
+          this.$store.commit(
+            "layout/setDashboardId",
+            list.managedObjects[0].id
+          );
         }
       });
   },
-  data() {
-    return {
-      layout: [],
-      isDraggable: true,
-      isResizable: true,
-      id: null
-    };
-  },
   methods: {
-    isLock: function(val) {
-      this.isDraggable = val.isDraggable;
-      this.isResizable = val.isResizable;
-      this.$message.success(
-        val.isResizable && val.isDraggable ? "编辑已解锁" : "编辑已锁定"
-      );
-    }
+    // 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>

+import Vue from 'vue';
+import { camelCase } from 'lodash';
+
+const requireComponent = require.context('./views', true, /.(vue|js)$/);
+
+const componentList = [];
+const componentAll = [];
+
+requireComponent.keys().forEach((fileName) => {
+  const componentConfig = requireComponent(fileName);
+  const componentName = camelCase(fileName.split('/')[1]);
+  if (componentList.indexOf(componentName) === -1) {
+    componentList.push(componentName);
+  }
+  componentAll.push(componentConfig.default.name);
+  Vue.component(
+    componentConfig.default.name,
+    componentConfig.default || componentConfig
+  );
+});
+
+window.componentList = componentList;
+window.componentAll = componentAll;

@@ -6,13 +6,13 @@
         shape="circle"
         icon="close"
         @click="close"
-        v-show="isDraggable&&isResizable"
+        v-show="this.$store.state.layout.isDraggable&&this.$store.state.layout.isResizable"
       ></a-button>
       <a-button
         size="small"
         shape="circle"
         icon="setting"
-        v-show="isDraggable&&isResizable"
+        v-show="this.$store.state.layout.isDraggable&&this.$store.state.layout.isResizable"
       ></a-button>
     </div>
     <component :is="layout.name" :isConfig="isConfig"></component>
@@ -34,8 +34,8 @@ export default {
   props: {
     layout: Object,
     index: Number,
-    isDraggable: Boolean,
-    isResizable: Boolean
+    // isDraggable: Boolean,
+    // isResizable: Boolean
   },
   data() {
     return {

 <template>
   <grid-layout
-    :layout.sync="layout"
+    :layout.sync="this.$store.state.layout.layout"
     :col-num="100"
     :row-height="30"
-    :is-draggable="isDraggable"
-    :is-resizable="isResizable"
+    :is-draggable="this.$store.state.layout.isDraggable"
+    :is-resizable="this.$store.state.layout.isResizable"
     :is-mirrored="false"
     :vertical-compact="true"
     :margin="[0, 0]"
     :use-css-transforms="true"
   >
     <grid-item
-      v-for="(item,index) in layout"
+      v-for="(item,index) in this.$store.state.layout.layout"
       :x="item.x"
       :y="item.y"
       :w="item.w"
@@ -23,7 +23,7 @@
       :maxH="item.maxH"
       :key="item.i"
     >
-      <gridComponent :isDraggable="isDraggable" :isResizable="isResizable" :layout="item" :index="index" @close="close"/>
+      <gridComponent :layout="item" :index="index" @close="close"/>
     </grid-item>
   </grid-layout>
 </template>
@@ -32,11 +32,6 @@
 import VueGridLayout from "vue-grid-layout";
 import gridComponent from "./gridComponent";
 export default {
-  props: {
-    layout: Array,
-    isDraggable: Boolean,
-    isResizable: Boolean
-  },
   components: {
     GridLayout: VueGridLayout.GridLayout,
     GridItem: VueGridLayout.GridItem,
@@ -44,7 +39,7 @@ export default {
   },
   methods:{
     close:function(val){
-      this.layout.splice(val,1)
+      // this.layout.splice(val,1)
     }
   }
 };

@@ -5,9 +5,14 @@
       shape="circle"
       icon="plus"
       @click="() => visible = true"
-      v-show="isDraggable&&isResizable"
+      v-show="this.$store.state.layout.isDraggable&&this.$store.state.layout.isResizable"
+    ></a-button>
+    <a-button
+      size="small"
+      shape="circle"
+      icon="lock"
+      @click="isLock(!this.$store.state.layout.isDraggable)"
     ></a-button>
-    <a-button size="small" shape="circle" icon="lock" @click="isLock"></a-button>
     <a-modal
       title="添加小部件"
       centered
@@ -43,16 +48,10 @@
 
 
 <script>
+import { mapMutations } from "vuex";
 export default {
-  props: {
-    layout: Array,
-    isDraggable: Boolean,
-    isResizable: Boolean
-  },
   data() {
     return {
-      isDraggable1: this.isDraggable,
-      isResizable1: this.isResizable,
       visible: false,
       list: window.componentList,
       selectItem: null,
@@ -60,12 +59,9 @@ export default {
     };
   },
   methods: {
-    isLock: function() {
-      this.$emit("isLock", {
-        isDraggable: !this.isDraggable,
-        isResizable: !this.isResizable
-      });
-    },
+    ...mapMutations({
+      isLock: "setLock"
+    }),
     filterOption(input, option) {
       return (
         option.componentOptions.children[0].text
@@ -82,14 +78,7 @@ export default {
       }
     },
     add: function() {
-      this.layout.push({
-        x: 0,
-        y: 0,
-        w: 10,
-        h: 2,
-        i: this.layout.length + 1,
-        name: this.selectItem
-      });
+      this.$store.commit("setLatout", this.selectItem);
       this.visible = false;
     }
   }

-import Vue from "vue";
-import App from "./App.vue";
-import { camelCase } from "lodash";
-import { Modal, Button, Select, message } from "ant-design-vue";
-import { inventory } from "./api/inventory";
+import Vue from 'vue';
+import App from './App.vue';
+import store from './store';
+import './autoImport';
+import { Modal, Button, Select, message } from 'ant-design-vue';
+import { inventory } from './api/inventory';
 
 Vue.config.productionTip = false;
 Vue.use(Modal);
@@ -12,27 +13,8 @@ Vue.use(Select);
 Vue.prototype.$message = message;
 Vue.prototype.$inventory = inventory;
 
-const requireComponent = require.context("./views", true, /.(vue|js)$/);
-
-const componentList = [];
-const componentAll = [];
-
-requireComponent.keys().forEach(fileName => {
-  const componentConfig = requireComponent(fileName);
-  const componentName = camelCase(fileName.split("/")[1]);
-  if (componentList.indexOf(componentName) === -1) {
-    componentList.push(componentName);
-  }
-  componentAll.push(componentConfig.default.name);
-  Vue.component(
-    componentConfig.default.name,
-    componentConfig.default || componentConfig
-  );
-});
-window.componentList = componentList;
-window.componentAll = componentAll;
-
 new Vue({
-  el: "#app",
-  render: h => h(App)
+  el: '#app',
+  store,
+  render: (h) => h(App),
 });

+const state = {
+  layout: [],
+  isDraggable: true,
+  isResizable: true,
+  dashboardId: null,
+};
+
+const mutations = {
+  setDashboardId(state, id) {
+    state.dashboardId = id;
+  },
+  setLock(state, value) {
+    state.isDraggable = value;
+    state.isResizable = value;
+  },
+  setLatout(state, name) {
+    state.layout.push({
+        x: 0,
+        y: 0,
+        w: 10,
+        h: 2,
+        i: state.layout.length + 1,
+        name
+    });
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+};

+import Vue from 'vue';
+import Vuex from 'vuex';
+import layout from './components/layout';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  modules: {
+    layout
+  },
+});