Vue.js 组件化应用开发：App 组件结构及数据管理

<template>
  <div class='home'>
    <!-- 搭建框架 -->
    <PageHead />
    <PageLeft />
    <PageView />
    <PageRight />
<pre><code>&lt;!-- 组件的公共配置内容 --&gt;
&lt;!-- 上传图片组件 --&gt;
&lt;UpLoadImg :dialog-image-visible.sync='dialogImageVisible' @upLoadImgSuccess='upLoadImgSuccess' /&gt;
</code></pre>
  </div>
</template>
<script>
// 结构组件
import PageHead from './components/PageHead'
import PageLeft from './components/PageLeft'
import PageView from './components/PageView'
import PageRight from './components/PageRight'
import { createRandomId } from '@/utils'
// 公共配置组件
import UpLoadImg from '@/components/BasicConfig/UpLoadImg'
// 获取页面数据
import { getCmsPageById } from '@/api/activity'
export default {
  name: 'App',
  components: {
    PageHead,
    PageLeft,
    PageView,
    PageRight,
    UpLoadImg
  },
  data() {
    return {
<pre><code>}
</code></pre>
<p>},
computed: {
// 上传图片模态框是否显示
dialogImageVisible: {
get: function() {
return this.$store.state.dialogImageVisible
},
set: function(val) {
this.$store.commit('SET_UPIMAGE_VISIBLE', val)
}
}
},
created() {
this.init()
},
methods: {
init() {
this.getData()
},
getData() {
let pageId = this.$route.query.id
if (pageId) {
getCmsPageById(pageId).then(({data}) =&gt; {
this.postDataToH5(data)
})
}
},
postDataToH5(data) {
if (data &amp;&amp; data.componentList) {
data.componentList.forEach((item) =&gt; {
if (item.data.validTime &amp;&amp; typeof item.data.validTime === 'string') {
item.data.validTime = JSON.parse(item.data.validTime)
}
// 获取的组件数据无id则手动设置随机id
if (!item.id) {
const id = createRandomId()
item.id = item.data.component + '-' + id
}
})
this.$store.commit('UPDATE_COMPONENT', {data})
this.$store.commit('VIEW_UPDATE')
}
},
// 上传图片成功回调事件
upLoadImgSuccess(imgUrl) {
let fuc = this.$store.state.upLoadImgSuccess
if (fuc) fuc(imgUrl)
}
}
}
</script></p>