state

打开 store 里的 state.js ... 在这里可以描述一下应用需要的数据 .. 先去掉之前在这里添加的代码 ..

然后 export 一个默认的对象 .. 里面添加一个 entities ，这个属性里面的东西就是笔记应用里面需要的所有的笔记内容 ..

一个数组 .. 可以先手工给它添加两个项目 .. 项目里有个 body 属性，设置一下对应的值 .. 再添加一条 .. 修改一下 body 属性的值 .

getters

在应用里获取数据应该通过 getter 去做 .. 打开 getters.js .. export 一个 entities .. 它的值是个函数 .. state 这个参数就是应用里的数据 .. 这个 entities 可以返回应用数据里的 entities ..

应用数据
在打开一个组件 .. 在 components 下面，打开 Notes 这个组件 ..

先在组件的脚本里，导入一个帮手方法 .. 名字是 mapGetters 方法来自 vuex

然后在组件里面，添加一个 computed 属性 .. 里面用一下 spread 操作符，用一下 mapGetters .. 一个数组参数，里面说明一下要使用的 getters .. 添加一个 entities ..

意思就是把我们定义的 entities 这个 getter 作为这个组件的一个 computed 属性 .. 这样我们就可以在组件里面使用它了 ..

比如在这个使用了 note 组件的地方 .. 用一个 v-for ，循环一下，entity in entities .. v-bind:entity ，绑定一个 entity 属性，对应的值就是每次循环的时候，当前的项目，名字就是 entity ..

然后打开 Note 组件 ..

先在组件里面，添加一个 props 属性 .. 里面说明一下要使用的属性 .. 添加一个 entity ，这个 entity 就是从 Notes 组件传递过来的 ..

在这个 header 元素里面，绑定输出一个 entity 的 body ...

现在，界面上会显示一个笔记列表 .. 列表内容就是应用的 state 里面的 entities 属性的值 ...

v-if

这个笔记列表的底部会有一行提示文字，这行文字我想只让它在没有笔记内容的时候显示 .. 打开 Notes 组件 ..

找到这行文字的元素 .. 上面用一个 v-if .. !entities.length ，如果 entities 里面没东西，就显示这个元素 ..

页面上会隐藏这行无笔记的提示文字 .. 因为现在有要显示的笔记内容 ..