构建数据json

构建数据json

src/store/modules/template.js

@@ -3,6 +3,9 @@ import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,ge
 
 import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
 
+import Vue from 'vue';  //导入Vue 因为我们要进行深层次的json修改，深拷贝的数据无法令视图更新
+//所以我们需要使用Vue的$set方法来强制视图更新，在vuex中没有this，这里我们需要通过引入vue来使用vue.$set
+
 const state = {
   //0.全局配置 start------------------------------------------------------------> 
   editWebsiteId: "",//当前编辑网站的id
@@ -140,9 +143,13 @@ const mutations = {
     let module = JSON.parse(JSON.stringify(state.pageData.index[id]));
     module.content.componentList[sort].component_style = num;
     // 拷贝后直接替换原来的板块
-    state.pageData.index[id] = module;
+    //state.pageData.index[id] = module;
+    // 使用Vue.set来强制视图更新
+    Vue.set(state.pageData.index, id, module);
     console.log("当前的板块数据为：");
     console.log(state.pageData.index);
+
+    
   },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>