① 将搜索记录存入vuex

1

我们现在做什么？

看这张图片。

我们在导航栏的输入框当中输入文字。

输入了什么文字？

输入的是node。

然后出来了搜索的结果，对不对？

然后我们点击这个搜索结果的卡片。

我们点击这个卡片的时候，我们应该：把我们的搜索记录存入到vuex当中。

2

这个搜索结果的卡片，是什么组件展示的呢？

如上图所示，是list-card组件。

3

我们去查看一下list-card组件的代码。

我们发现了，这上面绑定了一个点击事件。

如果点击了这个list-card，那么会有一个open方法来处理的。

---

我们怎么做呢？

我们在这个open方法中，向上发送一个自定义事件。

发送给谁呢？

发送给home-search组件。

发送的是什么自定义事件呢？

click自定义事件。

并且我们传递了一个参数，参数是什么呢？

就是我们这个card渲染的数据item。

4

我们在父组件当中，当然是可以接收到子组件list-card传递过来的点击事件的，对不对。

那么我们就可以写一个方法来处理了，对不对？

我们写的方法是什么呢？就是下面的setHistory。

经过了上面的4个步骤，我们完成了一件什么事情呢？

就是搜索的结果卡片，如果我点击这个卡片，那么搜索记录会存入vuex。

5

我们的记录存入了vuex，对不对？

那么我们将输入的内容删除呢？

我们应该能够看到搜索记录的标签。

我们引入了vuex。

我们解构出来一个mapState方法。

这个方法的作用很简单，就是将vuex当中的historyLists数据源，映射成为什么呢？映射成为计算属性。

这是一个小技巧的。

6

然后你再看上面的图片。

如果historyLists里头有东西，那么我们肯定就自动渲染出来了。对不对。

7

我们回顾一下，我们做了什么？

第一：list-card绑定点击，发送自定义事件

第二：home-search接收事件，写方法处理将用户输入的value存入到vuex中。

第三：vuex中的状态，通过计算属性，自动渲染到页面。

就干了这么点东西。

这个功能叫什么？

叫点击保存搜索记录并渲染。