通常在大型 App 中，action 应该按不同目的进行 分组 / 模块化 的管理，具体请参考： Actions
下面再谈谈一个重要的东西，数据流：
为了更好地理解 Vuex app 中的数据流，我们来开发一个简单的计数器 app。注意：这个例子仅仅是为了更好地解释概念，在实际情况中并不需要在这种简单的场合使用 Vuex.
// store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 应用初始状态 const state = { count : 0 } // 定义所需的 mutations const mutations = { INCREMENT (state){ state.count ++ }, DECREMENT (state){ state.count -- } } // 创建 store 实例 export default new Vuex.Store({ state, mutations })
// actions.js export const increment = ({ dispatch }) => dispatch('INCREMENT') export const decrement = ({ dispatch }) => dispatch('DECREMENT')
<!- temmplate --> <div> Clicked: {{ count }} times <button v-on:click="increment">+</button> <button v-on:click="decrement">-</button> </div>
// 仅需要在根组件中注入 store 实例一次即可 import store from './store' import {increment, decrement} from './actions' const app = new Vue({ el : '#app', store, vuex : { getters: { count: state => state.count }, actions: { increment, decrement } } })
你会注意到组件本身非常简单：它所做的仅仅是绑定到 state、然后在用户输入时调用 actions。
你也会发现整个应用的数据流是单向的，正如 Flux 最初所定义的那样：
1.用户在组件中的输入操作触发 action 调用。
2.Actions 通过分发 mutations 来修改 store 实例的状态。
3.Store 实例的状态变化反过来又通过 getters 被组件获知。
最后：Vuex 并不强制要求所有的状态都必须放在 Vuex store 中 ，如果有些状态你觉得并没有需要对其变化进行追踪，那么你完全可以把它放在 Vuex 外面(比如作为组件的本地状态)。比如公共组件对外的接口，通过props传递数据更为有效。
Vuex的完整介绍请参考：Vuex
vue-devtools
vue-devtools是chrome的一个vue开发插件，可以在chrome商店下载crx扩展包进行安装。提供Components和Vuex预览(state变化跟踪等)功能，有助于开发和调试。
可以看到组件的prop属性、计算属性、vue getter属性等，以及Vuex中的触发的mutation、state 当前的值等我们可能关注的内容都直观地展示了出来。
Vue模块化
对于大型项目，为了更好地管理代码使用模块构建系统非常必要。推荐代码使用 CommonJS 或 ES6 模块，然后使用 Webpack 或 Browserify 打包。
Webpack 和 Browserify 不只是模块打包器。两者都提供了源码转换 API，通过它可以用其它预处理器转换源码。例如，借助 babel-loader 或 babelify 代码可以使用 ES2015/2016 语法。
你可以使用 Webpack + vue-loader 或 Browserify + vueify 构建这些单文件 Vue 组件。
选择哪种构建工具取决于你的经验和需求。Webpack 的功能更强大，如代码分割，将静态资源当作模块，提取组件的 CSS 到单独的一个文件等，不过它的配置相对复杂一点。如果你不需要 Webpack 的那些功能，使用 Browserify 更简单，最快的构建方式是使用官方出品的脚手架工具 vue-cli。参考：vue-cli
活动模板设计系统
这个设计系统只是对活动模板要展示的内容进行设计，具体的样式和交互由活动h5页面根据视觉和交互设计来定夺。活动里面的每一个子项都可以抽象为一个组件，h5展示端拿到每个组件的内容再套上对应组件的样式和交互逻辑，最终就形成了一个h5活动页面。
每一个活动组件对应三个模式组件：
1.标签组件，通过拖动来创建对应类型的组件
2.预览组件，展示当前组件各项的内容
3.编辑组件，用来编辑当前选中的组件的各项内容
完成后大概是这样的，以一个最简单的节标题组件为例：
