容器组件修改

项目容器组件，找了资料，都没有容器组件一个明确的定义，我就按照自己的理解说一下哈,最后总结了几个点，不知道对不对，如果有不对的地方，欢迎指教

容器化组件与组件区别：

容器化组件

• 展示和容器组件更好的分离，有助于更好的理解应用和UI
• 重用性高，展示组件可以用于多个不同数据源；
• 简化项目，让项目更加清晰
  组件
• 既存在应用数据的读取和处理，又存在数据的显示，组件复用率不高。

使用的场景（这里是从组件角度思考）

1，常见的组件封装，大家应该都清楚，这里我就不详细介绍了
注：如果组件的利用率较高，我们可以把里面的方法抽出一个文件，专门写公共方法，例如：table切换页面事件等
2，把前端自定义的一些字典属性，全部统一封装起来

• dict.js

export default {
  finishedList: [
    {
      value: '',
      label: '全部1'
    },
    {
      value: 'true',
      label: '已完成2'
    },
    {
      value: 'false',
      label: '进行中3'
    }
  ]
}

• main.js，在vue原型上，加上字典属性

import dict from '@/api/dict.js'
Vue.prototype.$dict = dict

• 引用的页面

<listSelect
   title="流程状态123"
   :finished-list="$dict.finishedList"
   v-model="searchCondition.finished"
   placeholder="请选择流程状态"
   @search="searchChange"
></listSelect>

3，把前端调用后端的一些字典属性，全部统一封装起来
当字典接口统一，通过type进行区分时

/**
 * 调接口，把data赋值给一个dictData数组变量
 * dictData存储在vuex中
 * 当页面调用时，封装方法，进行调用不同的字典数据，进行展示
 */
  export function procdefType (data, type) {
      return data.filter(val => {
          return val.type === type
      })[0].values.map(val => {
        return {
           value: val.key,
           label: val.value
        }
    })
  }

当字典接口不统一时

• config.js
  注：接口封装，要和后端进行沟通，把所有的接口都统一了，唯一变动的是流程中每个某块的名字

import http from '@/utils/http'
import { SERVER_PREFIX } from '@/configs'

/**
 * 接口list的封装
 * @key  接口地址
 * @condition 搜索条件
 * @pager 传参的页码数据
 */
export const fetchList = (key, condition, pager) => {
  if (!key) { // $message是在其他地方定义的
    return this.$message('缺少key值')
  }
  var url = `${SERVER_PREFIX}/${key}/list`
  return http.get(url, { condition, pager })
}

Vue.prototype.$api = {
    fetchList, // 此处只以list接口为案例
    ...... // 其他删除，详情页，新增等接口封装
}

export const  getNameKey (type) {
  var res = {}
  switch (type) { // 返回改类型的后端接口
    case 'book': // 图示
      return 'bookName'
    default:
      return 'name'
  }
}

export const  format(item, type, params = {}) {
  var res = {
      ...item,
      name: item[getNameKey(type)] || item.name,
      raw: { ...item }
  }
  return res
}

• 调用页面

<template>
  <list-select
    can-input
    v-model="value"
    ref="list"
    :data="list"
    :placeholder="getPlaceHolder()"
    @search="fetch"
  />
</template>

<script>
import ListSelect from '@/components/list-select'
import mapper from '@/utils/mapper'
export default {
  components: {
    ListSelect：'list-select'
  },
  props: {
    type: null,
    placeholder: String
  },
  watch: {
    value () {
      this.handleChange(this.value)
    }
  },
  data () {
    return {
      componentName: 'list-remote-select',
      list: [],
      innerOtherQuery: {},
      value: undefined,
      pageConfig: {
          current: 1,
          pageSize: 20
      }
  },
  mounted () {
    if (!this.type) {
      return this.$message.error('远程下拉请设置类型')
    }
    this.nameKey = mapper.getNameKey(this.type)
    this.fetch()
  },
  methods: {
    getKey (type) { // 各种类型的接口type
        return {
            book: 'rtp/book/list', // 获取book的list接口
            ......
       }[type]
    },
    fetch (name) {
       if (!this.type) return
       this.$api.fetchList(mapper.getKey(this.type), value, this.pageConfig).then(({ data }) => {
          this.list = this.format(data.data)
          this.$refs.list.setData(this.list)
       })
    },
    handleChange (value) {
      this.$emit('input', value)
    },
    format (list) {
      return list.map(item => mapper.format(item, this.type))
    },
    getPlaceHolder () {
      if (this.placeholder) {
        return this.placeholder
      }
      return mapper.getPlaceHolder(this.type)
    }
  }
}
</script>

4，把常用的一些方法，进行封装，减少代码冗余
5，来看一下项目简化，废话不多说，直接看demo

• 文件结构

src
  component // 此处是要在页面中展示的组件
      card1
      card2
      card3
      card4
      card5
      card6
  view
      index  首页
      contain  容器组件，展示数据

• contain 容器组件结构

<template>
  <div class="content">
     <div>我是容器组件展示内容</div>
    // 通过 is 展示 component 下面的组件
     <component :is="comment">123</component>
  </div>
</template>
<script>
const cardSync = { //一个容器包含所有的组件
  card1: () => import(/* webpackChunkName: "about" */ "./../component/card1.vue"),
  card2: () => import(/* webpackChunkName: "about" */ "./../component/card2.vue"),
  card3: () => import(/* webpackChunkName: "about" */ "./../component/card3.vue"),
  card4: () => import(/* webpackChunkName: "about" */ "./../component/card4.vue"),
  card5: () => import(/* webpackChunkName: "about" */ "./../component/card5.vue"),
  card6: () => import(/* webpackChunkName: "about" */ "./../component/card6.vue"),
};

export default {
  name: "contain",
  data() {
    return {
      comment: ""
    }
  }
  created() {
    this.type()
  },
  methods: {
    type() { // 通过route传的参数，与cardSync进行判断，展示那个组件
      for (let key in cardSync) {
        if (key === this.$route.params.name) {
          this.comment = cardSync[key]
        }
      }
    }
  }
}
</script>
<style scoped>
.blue {
  color: blue;
}
.content{
    padding: 20px;
}
</style>

• index 通过 to 进行传展示组件参数

<router-link to="/contain/card3">组件化容器</router-link>

这样的话，我们即减少了项目中，路由过多的问题，也会让项目更加简洁。