后台管理-----内容区域表单优化（针对页面不同数据的处理）

第1 步：我们可以将原来在页面写入表单的相关的配置单独抽出来，放入一个ts 文件中(content.config.ts) ：表示这个是属于用户页面表单相关的配置

第2步：在将这个配置文件（content.config.ts）引入到user页面中，在通过v-bind 全部传给子组件

第3步：我们可以把以下这个组件可以在次单独抽出来

 第4步：在新建compontents/page-content  内容展示区这个文件专门放置内容区页面

第5步：在再user 页面进行 引入使用

  第6步：user 网络请求的代码最好不要写在最大的父组件user.vue 里面，会引起层级悖论。

 6.1  因为user 组件里面引用了 PageContent 组件,PageContent 组件里面引用引用了HyTable组件

6.2  在别人使用PageContent 页面时，别人传进来一个pageName

例如：给user页面 传进来 pageName="user",到时候pageContent 帮助去vuex请求数据，帮助去vuex 里面去拿到数据，就是将网络请求这部分的相关逻辑放到PageContent ,到时候只传一个字符串就可以了。到时候pageContent 拿到数据 交给 HyTable 组件做一个展示。

第7步：将网络请求的代码放到page-content组件里面去

1.拿到useStore 和引入computed

2. 将网络请求的代码也移到这边来

3.之后在这个组件里面引入hyTabel 组件

4.我们现在先暂时将网络请求相关的在page-content 的写死的

 第8步：来到vuex 里面

我们可以看到我们请求接口的一般都是pageUrl ：/user/list 用户接口，如果请求用户商品接口 role/list, 如果请求商品接口就是这样的 goods/list ,一般来说这种接口是比较规范的。

第9 步：如果公司里面不是正规的

1.首先我们可以从这里改起，别人在dispatch 的调用actions 的时候，让别人最好不要传入pageUrl 了，可以让别人传入一个pageName, 这个pageName 是什么呢？如果这里是一个请求用户列表这里就传入一个users, 如果是请求 角色列表 这里 role

2. 为什么用pageName？原因很简单，因为多个页面都会用到pageContent, 到时候给出传入pageName ,到时候这里会传入pageName，这里就会接收到一个pageName 属性,

注意：这里的pageName 不是写死的，是从setup 里面传入的props 里面 去拿的。

3.然后是可以在vuex /actions  payload 里面拿到这个pageName 的

如果公司里的接口是写的比较规范的话，这个接口是可以拼出来的

如果公司不是规范的话有变化的话，可以使用swich 来做条件判断

例如向这种类似不规范的：

let pageUrl=' '

switch (pageName){

case 'users':

    pageUrl='api/users/abc/list'

break

case 'role':

pageUrl='api/role/bac/list'

}

 //  方法1；
  // let pageUrl='' //默认是一个空的字符串
  //  switch (pageName){
  //   case 'users':  //如果是这一个值
  //   pageUrl='/users/list'
  //   break
  //   case 'role':
  //   pageUrl='/role/list'
  //  }

4.把获取好的url 传进来，和queryInfo 发起请求

5.拿到请求结果并进行处理

6.将数据存储到state 中 进行commit 提交

7.在mutations 里面进行修改

8.之后在user 页面使用只需要传入对应的pageName 就可以了。

9.到时候page-content 组件，就可以通过在setup 里面传入props 拿到一层组件传入的pageName 了。

第10步：获取数据

这个是在page-content.vue 是这样获取的：

相当于直接去拿store.state.system 这个模块里面的userList的数据

//拿到我们的用户的数据
 //const userList=computed(()=>store.state.system.userList)

优化：

现在我们通过vuex 里面的getters 属性，封装一些getter,让getter 间接的去获取上面的state 里面的数据。

到时候getters 里面会去返回我们获取到的数据

1.这个getters 首先会第一个传进来一个state

2.getter 本身是可以返回一个函数的，并且这个函数会有一个参数，到时候传进来一个pageName,它就会给你返回一个具体的数据

第11步：在组件里面拿到获取的数据

1.在store 里面拿到getters从这个里面获取数据[`模块名/getters 里面获取数据的方法`]，getters 本身是一个函数，我们去调用这个函数的时候把这个props.pageName 传进来

2.到时候我们接收的数据就是

第12步：如何在页面去使用获取的数据

1.只需要在各个页面的组件中传入对应的pageName 就可以了

第13步：整个数据效果的展示