vue-极客园M端

• 完成当前浏览频道激活，首页组件准备当前浏览频道索引，传人数据给频道组件。

src/views/home/index.vue 浏览频道索引，传给频道组件
data () { return { myChannels: [], showChannel: false, + activeIndex: 0 } },
+

src/views/home/components/article-channel.vue 使用浏览频道索引
props: { value: { type: Boolean, default: false }, myChannels: { type: Array, default: () => [] }, + activeIndex: { + type: Number, + default: 0 + } }

#04-频道-渲染可选频道

目的：完成可选频道的渲染
大致步骤：

• 知道可选频道数据：就是所有频道除去我的频道剩余频道。
• 获取所有频道数据
• 使用计算属性得到可选频道数据
• 进行数据渲染即可

落地代码：src/views/home/components/article-channel.vue

• 获取所有频道数据

  data () { return { allChannels: [] } }, created () { this.getAllChannels() }, methods: { async getAllChannels () { const [, res] = await getAllChannels() this.allChannels = res.data.data.results } }

• 使用计算属性得到可选频道数据

  computed: { // 可选频道 optionalChannels () { // 在myChannels中找不到的就是可选的 return this.allChannels.filter(item => !this.myChannels.find(c => c.id === item.id)) } },

• 进行数据渲染即可

  <div class="head" style="margin-top:12px">         <h3>频道推荐</h3>       </div>       <div class="body">         <a href="javascript:;" v-for="item in optionalChannels" :key="item.id">+ {{item.name}}</a>       </div> <br />**总结：** 使用计算属性，全部频道-我的频道=可选频道。

  #05-频道-点击进入频道

  目的：频道组件点击频道，关闭频道对话框，首页切换到对应频道。技术点掌握sync的使用。
  大致步骤：

• 点击频道将当前的点击按钮索引传递给父组件，父组件接收后修改tabs的值即可完成切换

• 如果传给父组件的事件时 update:属性名称，父组件传值 :属性名称。可以简写 属性名称.sync

落地代码：

• 完成点击进入频道功能

src/views/home/components/article-channel.vue

// 进入频道 enterChannel (index) { // 关闭对话框 this.$emit(‘input’, false) // 传递频道索引 this.$emit(‘update:activeIndex’, index) }
src/views/home/index.vue

• .sync 也是一个语法糖，可以简写 :abc=”数据” @update:abc=”数据=$event” 代码，其实这段代码就是实现了双向数据绑定，但是组件不能使用多个v-model，所以提供了 .sync 来简写代码。

  
  总结： 知道 .sync 语法糖作用和简写代码的规则，:abc=”数据” @update:abc=”数据=$event” 。

  #06-频道-支持本地操作

  目的：未登录情况下获取我的频道都是写死的，服务端未提供修改接口，需要本地存储，本地修改。
  
  大致步骤：

• 按照流程图在 原来的API函数实现

• 修改home组件中调用API函数的地方(因为数据结构会有变化)

落地代码：

• 按照流程图在 原来的API函数实现

src/api/channel.js
/* 获取我的频道（未登录会返回默认的一些频道） */ export const getMyChannels = async () => { if (!store.state.user.token) { const localData = JSON.parse(localStorage.getItem(KEY) || ‘[]’) if (localData.length) { // 保持和res一样的结构，使用这个API的地方就无需修改 return localData } else { // 获取数据本地缓存 const [, res] = await request({ url: ‘v1_0/user/channels’ }) // 只存数组 localStorage.setItem(KEY, JSON.stringify(res.data.data.channels)) return res.data.data.channels } } else { const [, res] = await request({ url: ‘v1_0/user/channels’ }) return res.data.data.channels } }

• 修改home组件中调用API函数的地方

src/views/home/index.vue
async created () { // 不使用err不写err即可，但是,号需要写 const channels = await getMyChannels() this.myChannels = channels }
总结： 在API函数完成获取我的频道逻辑业务，降低组件的业务复杂的，提高可复用性。
补充： 登录状态的切换，需要更新频道数据。
watch: { ‘$store.state.user.token’: async function () { const channels = await getMyChannels() this.myChannels = channels this.activeIndex = 0 } }

#07-频道-添加

目的：完成我的频道的添加操作，支持本地和线上。

大致步骤：

• 按照流程图 定义API函数实现
• 绑定点击事件，调用API函数添加

落地代码：
api/channel.js API函数
/ 添加频道 @param {Array