1 更多操作思路分析：
总体认知：搭结构，先做基本的页面样式，再做功能。能封装就封装，复杂功能拆分成一个个分支组件
2 我要实现的效果
对于已经登陆的用户，点击小×可允许他们去关闭某篇文章，或者是反馈内容；对于没有登录的用户小×不会显示
3 大体规划
第一步，搭建UI页面。只有登录的用户才能看见小×，未登录是没有的
第二步，使用弹层组件，使同一时间只有一个子内容显示，另一个隐藏
第三步，点击‘不感兴趣’，要做三件事分别是 1调接口，关闭弹层，删除文章（数组中）
第四步，点击‘举报内容’，同样是做三件事
4 具体实现使用到的知识点
4.1，需要判断用户有没有token，有token就显示小x号可对其操作，没token那只能干看了。在组件中判断有没有token的话，if(this.$store.state.XXX)--毕竟token是保存在vuex的state中的，注意：如果是在template中的话不要加this。因为vue底层已经做了
4.2，弹层组件popup组件+v-model +利用v-if-else实现状态切换--这个看官网的使用方法，vant（有赞）
4.3，点击小x控制弹出框的显示隐藏（点击事件可以把简单代码写在注册行，如：@click='xx变量名=false' 以及v-if = ‘布尔值’，如：v-if="!isReport"），以及获取文章的id，后面根据他删除，id是上面v-for的属性，也就是说，你要点击这个删除某个文章，肯定需要获取文章的id之类的，万变不离其宗。
4.4 弹出框用的是vant里的popup弹出层
4.5 弹出框里面的内容，选择新建一个.vue文件搭建结构（就问你能不能在当前页面写？——能！），目的是结构清晰，方便维护。 利用vant里面的cell单元格，先将所有的内容放进去，只需要控制每次只有一个显示就行。
4.6
这个状态1 ，2 其实就是刚搭好页面结构，就是需要隐藏的和显示的都在一起，算了，加一段代码。如打印的话，会清楚看到页面结构，理解我说的。
4.7 使用v-if else控制元素的现实和隐藏，可以做一些判断
// 此文件负责弹出层内容显示，使用vant里面的cell单元格 <template> <div class="more-action"> <!-- 状态一 --> <van-cell-group v-if="!isReport"> <van-cell @click="buxihuan">不感兴趣</van-cell> <van-cell is-link @click="isReport = true">反馈垃圾内容</van-cell> <!-- 定义一个布尔变量，当我点反馈的时候，状态1隐藏，状态2 显示那么他的所在的状态一的值应该是 false--> <!-- 首先，状态1应该是点击x后默认显示的，此时初始状态是 ，1显示，2隐藏，当我点击反馈的时候，此时他隐藏，2显示 --> <van-cell>拉黑作者</van-cell> </van-cell-group> <!-- 状态二 反馈--> <van-cell-group v-else> <van-cell icon="arrow-left" @click="isReport = false">返回</van-cell> <van-cell v-for="item in reports" :key="item.value" @click="hReport(item.value)" >{{ item.label }}</van-cell > </van-cell-group> </div> </template>
5.继续上面的知识点
5.1 点击不感兴趣要做三件事，调接口+关弹窗+删数据
上面新建了，子组件，一般子传父都是传些数据，然而：
子传父-骚操作--子传父不带数据，就告诉你，爹你来！
他爹通过子自定义的事件名接受，同时使用自己的回调函数，处理。
5.2 调接口--毫无难度-先去建个.js文件封装，接着导入-使用-固定步骤固定格式-熟能生巧尔
5.3删除文章-删除数组中的（不可能因为你不喜欢这个文章，后台把数据库内容给删除了），利用findindex找下标，利用splice删除数组该下标。里面有一个点比较关键，下标哪里来？点击小x的时候，就可以获取得到，然后定义state里定义变量接受，之后传给函数，Soeasy。（findindex 是js封装的api，我会在另一个文章中集中总结）
6重要知识点
1.【封装数据】把数据封装到单独的文件中，封装成对象。然后渲染的时候通过引入（注意，引入的时候需要先定义，例如这种需要在data中引入，如函数需要在methods中），再使用v-for。可以提高可维护性。试想，如果你写在data或者state中，固定的的写死，但凡需求以便，或是改动数据非常不便，理解封装的思想很重要
/ 以模块的方式导出 举报文章 时，后端接口约定的举报类型 // 这是常量数组 // 搞这个的目的是后期可以提高可维护性，改动简单，属于弊在当下功在千秋 const reports = [ { value: 0, label: '其它问题' }, { value: 1, label: '标题夸张' },{ …… } ——————————————————下面是不封装的对比—————————————————————— <van-cell icon="arrow-left">返回</van-cell> <van-cell>侵权</van-cell> <van-cell>色情</van-cell> <van-cell>暴力</van-cell> …… </van-cell-group>
6.2 消除魔法字符串
消除魔法字符串，听着很酷炫，其实很简单。不过他很优雅，也确实很帅。
let a = 100; //这是普通写法 console.log(100 + 1) console.log(100 + 2) console.log(100 + 3) console.log(100 + 4) …… //高级写法： console.log(a + 1) console.log(a + 2) console.log(a + 3) console.log(a + 4) 看见没，如果这是一个一直输出，100+上某个数，我可以将a 提出来，这样将来变成99+某个数，我只需要改一个值就行了
6.3 父组件修改子组件
1 给子组件添加引用。它子组件补充一个 ref 例如 <子组件名字 ref="XXXX">
2 通过this.$refs.子组件引用.子组件数据=新值。this.$refs.XXXX.aaaa= 值
注意：一定要确保这个子组件已经被创建出来了
父组件可以想怎么修改子组件就怎么修改子组件
0今日重点
token持久化
背景：在我点击登录进去首页的时候，后台token确实发来了，但是保存在内存中，一刷新就没了，而要干一些事，没token还得重新登录，非常不合适。于是借助本地存储+vuex
知识回顾：vuex保存数据的特点：保存在内存中（页面一刷新就没了），响应式，全局公共的，任何组件都可以使用；本地存储特点：保存在本地浏览器，存储大小有几个m，非响应式，但保存时间长，刷新页面数据还在。
我在初始做这个项目的时候，就感觉出来了，页面一刷新，我就得重新登录获取token，然后我想用本地存储，结果只在请求中写了保存，却没有把token取出来给state，结果肯定是不行 。
使用方法：
首先，token是后台给我们发的，发来的是对象，键值对的形式，此时打印的话，可以看到，token的值是字符串。我们存的时候需要转换成字符串，取出来的时候，需要转化成对象，好操作token。
1 .localStorage.setItem("键", JSON.stringify(值)) // 保存 2. JSON.parse(localStorage.getItem(值)) //获取 3. localStorage.removeItem(‘键’) //删除
还可以将他们封装起来，到时候随便调用。
