3. 数据分离与 Vuex 的引入

Vue在线简历编辑器

要实现右侧预览功能，就需要从左侧编辑器中获得数据，虽然可行，但是【耦合性】太高。

会发现 ResumePreview 严重依赖 ResumeEditor，换句话说，ResumePreview 必须和 ResumeEditor 在一起，ResumePreview 不能从其他的地方读入 resume 数据。

这样，就不优雅了，因此考虑将数据单独抽离出来，可以提供给当前项目下的任何组件使用。

这里本项目选择引入 Vuex 【状态管理模式】：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

从而实现全局数据源，根实例下的任意组件均可方便调用。

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Vuex 是推荐单向绑定的（data -> 页面），一旦数据发生变化，就立即更新页面；但反过来，如果用户在页面做出了修改，那么就把变动手动收集起来，commit（携带载荷）到 store 仓库的 mutations 中进一步对 state 状态数据进行操作。增加了 commit 和 mutations 中间环节，也便于 Vue DevTools 捕捉每一次微小的数据变化，总之，Vuex 带来了更强的【控制力】。

---

最后，学到了一点黑科技：

# 巧妙设置间隙，不用去头或去尾
section + section { margin-top: 2em; }

# 合并空白字符，但是保留换行符
p { white-space: pre-line; }

# 这样背景色就不会占满正行
h2: {display: inline-block; }

# 活用自定义属性，在嵌套较深、复用性极低 HTML 标签中很实用，便于 CSS 选择器选择
section[data-name="profile"] { xxx: xxx }

# 此标签可以呈现小一号字体的效果，如果外层是 <p></p>，那么嵌套的<smal></small> 会小一号
<small> 文字 </small> 

# <hr> 标签在 HTML 页面中创建一条水平线。
<hr>

# 配合一定的样式：
  hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 24px 0;
  }