├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── dist ├── index.html ├── static │ ├── css │ │ ├── app.ec918186328f90b61bd3061bcbad4e98.css │ │ └── app.ec918186328f90b61bd3061bcbad4e98.css.map │ └── js │ │ ├── app.4051c62b7016763df983.js │ │ ├── app.4051c62b7016763df983.js.map │ │ ├── manifest.3ad1d5771e9b13dbdad2.js │ │ ├── manifest.3ad1d5771e9b13dbdad2.js.map │ │ ├── vendor.8fcde9004de500fb3651.js │ │ └── vendor.8fcde9004de500fb3651.js.map └── vue-vuex-container-component │ └── dist │ └── static │ ├── css │ ├── app.ec918186328f90b61bd3061bcbad4e98.css │ └── app.ec918186328f90b61bd3061bcbad4e98.css.map │ └── js │ ├── app.3be6ac6ae84c79d1dbbd.js │ ├── app.3be6ac6ae84c79d1dbbd.js.map │ ├── manifest.af5ec52920e0722bdbaf.js │ ├── manifest.af5ec52920e0722bdbaf.js.map │ ├── vendor.8fcde9004de500fb3651.js │ └── vendor.8fcde9004de500fb3651.js.map ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── CommentList.vue │ └── CommentListNew.vue ├── containers │ ├── CommentListContainer.vue │ └── ConnectCommentListContainer.vue ├── main.js └── store │ └── index.js └── static └── .gitkeep /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | 'semi': 'off', 27 | 'comma-dangle': 'off', 28 | 'space-before-function-paren': 'off', 29 | // allow debugger during development 30 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | 7 | # Editor directories and files 8 | .idea 9 | .vscode 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 致敬 React: 为 Vue 引入容器组件和展示组件 2 | 3 | > 首发掘金 [迅雷前端](https://juejin.im/user/599a9277f265da246c4a0cdb/posts) 专栏，原文地址：[致敬 React: 为 Vue 引入容器组件和展示组件](https://juejin.im/post/5ae9a5545188256709610635) 4 | 5 | ![](https://user-gold-cdn.xitu.io/2018/5/3/16323acd8e3292cf?imageView2/1/w/1080/h/1000/q/85/format/webp/interlace/1) 6 | 7 | 8 | 如果你使用过 Redux 开发 React，你一定听过 容器组件（Smart/Container Components） 或 展示组件（Dumb/Presentational Components），这样划分有什么样的好处，我们能否能借鉴这种划分方式来编写 Vue 代码呢？这篇文章会演示为什么我们应该采取这种模式，以及如何在 Vue 中编写这两种组件。 9 | 10 | ## 为什么要使用容器组件? 11 | 12 | 假如我们要写一个组件来展示评论，在没听过容器组件之前，我们的代码一般都是这样写的： 13 | 14 | ### components/CommentList.vue 15 | 16 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/3/16324780ec111ec2?w=908&h=1242&f=png&s=127729) 17 | 18 | 19 | ### store/index.js 20 | 21 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/3/163247803968782d?w=788&h=1602&f=png&s=156436) 22 | 23 | 这样写看起来理所当然，有没有什么问题，或者可以优化的地方呢？ 24 | 25 | 有一个很显而易见的问题，由于 CommentList.vue 与 项目的 Vuex store 产生了耦合，导致脱离当前的项目很难复用。 26 | 27 | 有没有更好的组件的组织方式，可以解决这个问题呢？是时候了解下 React 社区的容器组件的概念了。 28 | 29 | ## 什么是容器组件 30 | 31 | 在 React.js Conf 2015 ，有一个 [Making your app fast with high-performance components](https://www.youtube.com/watch?v=KYzlpRvWZ6c&t=1351) 的主题介绍了容器组件。 32 | 33 | ![什么是容器组件](https://user-gold-cdn.xitu.io/2018/5/2/1631f58b1bb103cc?w=1046&h=544&f=png&s=287842) 34 | 35 | 容器组件专门负责和 store 通信，把数据通过 props 传递给普通的展示组件，展示组件如果想发起数据的更新，也是通过容器组件通过 props 传递的回调函数来告诉 store。 36 | 37 | 由于展示组件不再直接和 store 耦合，而是通过 props 接口来定义自己所需的数据和方法，使得展示组件的可复用性会更高。 38 | 39 | ## 容器组件 和 展示组件 的区别 40 | 41 | | | 展示组件 | 容器组件 | 42 | | -------------- | -------------------------- | ---------------------------------- | 43 | | 作用 | 描述如何展现（骨架、样式） | 描述如何运行（数据获取、状态更新） | 44 | | 直接使用 store | 否 | 是 | 45 | | 数据来源 | props | 监听 store state | 46 | | 数据修改 | 从 props 调用回调函数 | 向 store 派发 actions | 47 | 48 | > 来自 Redux 文档 https://user-gold-cdn.xitu.io/2018/5/2/1631f590aa5512b7 49 | 50 | ## 用 容器组件/展示组件 模式改造上面的例子 51 | 52 | 针对最初的例子，如何快速按照这种模式来划分组件呢？我们主要针对 CommentList.vue 进行拆分,首先是基本的概要设计： 53 | 54 | ### 概要设计 55 | 56 | #### 展示组件 57 | 58 | * **`components/CommentListNew.vue`** 这是一个新的评论展示组件，用于展示评论 59 | * `comments: Array` prop 接收以 `{ id, author, body }` 形式显示的 comment 项数组。 60 | * `fetch()` 接收更新评论数据的方法 61 | 62 | 展示组件只定义外观并不关心数据来源和如何改变。传入什么就渲染什么。 63 | 64 | comments、fetch 等这些 props 并不关心背后是否是由 Vuex 提供的，你可以使用 Vuex，或者其他状态管理库，甚至是一个 EventBus，都可以复用这些展示组件。 65 | 66 | 同时，可以利用 props 的类型和验证来约束传入的内容，比如验证传入的 comments 是否是一个含有指定字段的对象，这在之前混合组件的情况是下是没有的，提高了代码的健壮性。 67 | 68 | #### 容器组件 69 | 70 | * **`containers/CommentListContainer.vue`** 将 CommentListNew 组件连接到 store 71 | 72 | 容器组件可以将 store 对应的 state 或者 action 等封装传入展示组件。 73 | 74 | ### 编码实现 75 | 76 | > Talk is cheap, show me the code! 77 | 78 | ### components/CommentListNew.vue 79 | 80 | 这个文件不再依赖 store，改为从 props 传递。 81 | 82 | 值得注意的是 comments 和 fetch 分别定义了 type 、default 和 validator，用以定义和验证 props。 83 | 84 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/3/163247803c0c257b?w=908&h=1746&f=png&s=173611) 85 | 86 | 87 | ### containers/CommentListContainer.vue 88 | 89 | 容器组件的职责 90 | 91 | * 通过 computed 来获取到状态更新，传递给展示组件 92 | * 通过 methods 定义回调函数，回调函数内部调用 store 的 dispatch 方法，传递给展示组件 93 | 94 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/3/16324781498ee9e1?w=1108&h=1458&f=png&s=157338) 95 | 96 | 97 | ## 使用 @xunlei/vuex-connector 实现容器组件 98 | 99 | 上面演示的容器组件的代码非常简单，实际上如果直接投入生产环境，会产生一些问题。 100 | 101 | ### 手动实现容器组件存在的不足 102 | 103 | #### 代码比较繁琐 104 | 105 | 在上面的例子中，每次传递一个 state 都要定义一个 computed，每传递一个 mutation 或者 action 都需要定义一个方法，而且还要注意这个方法的参数要透传过去，同时还要处理返回值，比如异步的 action 需要返回 promise 的时候，定义的这个 method 也得把 action 的返回值返回出去。 106 | 107 | #### 无法透传其他 props 给展示组件 108 | 109 | 比如展示组件新增了一个 prop 叫做 type，可以传递一个评论的类型，用来区分是热门还是最新，如果用上面的容器实现方式，首先需要在容器组件这层新增一个 prop 叫做 type 接受外部传来的参数，然后在展示组件内部同样定义一个 叫做 type 的 prop，然后才能传递下去。 110 | 111 | 需要透传的 props 必须定义两遍，增加了维护的成本。 112 | 113 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/3/16324780438319fe?w=1164&h=378&f=png&s=44205) 114 | 115 | 116 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/3/16324780456150a6?w=620&h=522&f=png&s=51905) 117 | 118 | 119 | #### 容器组件无法统一进行优化 120 | 121 | 每一个手动实现的容器组件实质上代码逻辑非常近似，但是没有经过同一层封装，如果目前实现的容器组件存在一些性能优化的地方，需要每个容器组件都进行统一的修改。 122 | 123 | #### 无法控制展示组件不去获取 store 124 | 125 | 因为容器组件是通过 this.$store 获取 store 的，展示组件内部实质上也可以直接跟 store 通信，如果没有约束，很难统一要求展示组件不得直接和 store 通信。 126 | 127 | ### 使用 @xunlei/vuex-connector 128 | 129 | @xunlei/vuex-connector 借鉴了 react redux 的 connect 方法，在 vuex 基础上进行的开发。 130 | 131 | 有以下几个特点： 132 | 133 | #### 代码非常简洁 134 | 135 | 下面是上面例子中手动实现的容器组件的改造版本： 136 | 137 | ##### comonents/ConnectCommentListContainer.vue 138 | 139 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/30/163af255cbe97e85?w=1160&h=846&f=png&s=130594) 140 | 141 | 通过 connector 的 connnect 方法，传入要映射的配置，支持 mapStateToProps, mapGettersToProps, mapDispatchToProps, mapCommitToProps 这四种，每一种都是只要配置一个简单的 map 函数，或者字符串即可。 142 | 143 | 然后在返回的函数中传入要连接的展示组件即可，是不是非常的简洁。 144 | 145 | #### 容器组件本身也可以复用 146 | 147 | 由于借鉴了 redux 优雅的函数式风格， connector 的 connnect 方法 返回的函数实际上是一个高阶组件，也就是一个可以创建组件的函数。这样带来了额外的好处，不同的展示组件也可以复用同一个容器组件。 148 | 149 | 举个例子： 150 | 151 | 如果你写了多个版本的评论展示组件，接受的数据和更新数据的方式都是一样的，那么你就没有必要为每个版本的评论组件都搞一个容器组件了，只要复用同一个高阶组件函数即可。 152 | 153 | ##### 问题来了，connector 是什么？ 154 | 155 | connector 实际上是一个能获取到 store 实例的连接器，可以在初始化 vuex store 的时候进行初始化。 156 | 157 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/3/163247808e649e22?w=1076&h=810&f=png&s=103235) 158 | 159 | 160 | 一个 Vue 程序实际上只需要初始化一次即可。 161 | 162 | #### 支持透传其他 props 给展示组件 163 | 164 | VuexConnector 实现的时候采用了函数式组件( `functional: true` ) 165 | 166 | 函数式组件是无状态 (没有响应式数据)，无实例 (没有 this 上下文)。 167 | 168 | 在作为包装组件时函数式组件非常有用，比如，当你需要做这些时： 169 | 170 | - 程序化地在多个组件中选择一个 171 | - 在将 children, props, data 传递给子组件之前操作它们。 172 | 173 | 另外，函数式组件只是一个函数，所以渲染开销也低很多。然而，对持久化实例的缺乏也意味着函数式组件不会出现在 Vue devtools 的组件树里。 174 | 175 | 因此需要透传的 props 可以直接透传，需要通过 map 方式从 store 里进行获取的 props 直接会根据配置生成。 176 | 177 | #### 统一封装方便后续统一优化 178 | 179 | VuexConnector.connect 方法将本来需要重复做的事情进行了抽象，也带来了后期进行统一优化和升级的便利。 180 | 181 | #### 可以控制展示组件无法直接与 store 通信 182 | 183 | VuexConnector 不依赖 this.$store，而是依赖初始化传入的 store 实例，容器组件可以用 connect 将展示组件与 store 进行连接。 184 | 185 | 由于不依赖 this.$store，我们在程序入口 new Vue 的时候，就不需要传入 store 实例了。 186 | 187 | 比如，之前我们是通过下面的方式进行初始化： 188 | 189 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/3/163247809052ecea?w=688&h=702&f=png&s=73496) 190 | 191 | 192 | 使用了 VuexConnector 之后，在最初 new Vue 的时候就不需要也最好不要传递 store 了，这样就避免了 this.$store 泛滥导致代码耦合的问题。 193 | 194 | 195 | ## 引入容器组件/展示组件模式带来的好处 196 | 197 | ### 可复用性 198 | 199 | 容器组件/展示组件的划分，采用了单一职责原则的设计模式，容器组件专门负责和 store 通信，展示组件只负责展示，解除了组件的耦合，可以带来更好的可复用性。 200 | 201 | ### 健壮性 202 | 203 | 由于展示组件和容器组件是通过 props 这种接口来连接，可以利用 props 的校验来增强代码的可靠性，混合的组件就没有这种好处。 204 | 205 | 另外对 props 的校验可以采取一下几种方式： 206 | 207 | #### Vue 组件 props 验证 208 | 209 | 可以验证 props 的类型，默认可以校验是否是以下类型： 210 | 211 | - String 212 | - Number 213 | - Boolean 214 | - Function 215 | - Object 216 | - Array 217 | - Symbol 218 | 219 | 如果你的 props 是类的一个实例，type 也可以是一个自定义构造器函数，使用 instanceof 检测。 220 | 221 | 如果还是不满足需求，可以自定义验证函数： 222 | 223 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/3/16324780c39e44ec?w=740&h=558&f=png&s=51562) 224 | 225 | 226 | #### TypeScript 类型系统 227 | 228 | 229 | Vue 组件 props 验证对于对象或者其他复杂的类型校验还是不太友好，所以很多人也推荐大家的 props 尽量采取简单类型，不过如果你有在用 TypeScript 开发 Vue 应用，可以利用 TypeScript 静态类型检查来声明你的 props 。 230 | 231 | ![为 Vue 引入容器组件和展示组件](https://user-gold-cdn.xitu.io/2018/5/3/16324780dac6da6a?w=1052&h=522&f=png&s=63765) 232 | 233 | 234 | ### 可测试性 235 | 236 | 由于组件做的事情更少了，使得测试也会变得容易。 237 | 238 | 容器组件不用关心 UI 的展示，只关心数据和更新。 239 | 240 | 展示组件只是呈现传入的 props ，写单元测试的时候也非常容易 mock 数据层。 241 | 242 | 243 | ## 引入容器组件/展示组件模式带来的限制 244 | 245 | ### 学习和开发成本 246 | 247 | 因为容器组件/展示组件的拆分，初期会增加一些学习成本，不过当你看完这篇文章，基本上也就入门了。 248 | 249 | 在开发的时候，由于需要封装一个容器，包装一些数据和接口给展示组件，会增加一些工作量， @xunlei/vuex-connector 通过配置的方式可以减轻不少你的工作量。 250 | 251 | 另外，在展示组件内对 props 的声明也会带来少量的工作。 252 | 253 | **总体来说，引入容器组件/展示组件模式投入产出比还是比较值得的。** 254 | 255 | 256 | ## 延伸阅读 257 | 258 | - Redux 文档 [https://user-gold-cdn.xitu.io/2018/5/2/1631f590aa5512b7](https://user-gold-cdn.xitu.io/2018/5/2/1631f590aa5512b7) 259 | - Making your app fast with high-performance components [https://www.youtube.com/watch?v=KYzlpRvWZ6c&t=1351](https://www.youtube.com/watch?v=KYzlpRvWZ6c&t=1351) 260 | 261 | ## 代码示例 262 | 263 | 264 | ### Vue Vuex 容器-展示组件模式 Demo 265 | 266 | #### Demo 在线地址: 267 | 268 | [https://xunleif2e.github.io/vue-vuex-container-component/dist/](https://xunleif2e.github.io/vue-vuex-container-component/dist/) 269 | 270 | #### Demo 源码： 271 | [https://github.com/xunleif2e/vue-vuex-container-component](https://github.com/xunleif2e/vue-vuex-container-component) 272 | 273 | ### @xunlei/vuex-connector 274 | 275 | 基于 Vue 生态实现的Vuex store Connector 276 | 277 | #### @xunlei/vuex-connector 源码: 278 | 279 | [https://github.com/xunleif2e/vuex-connector](https://github.com/xunleif2e/vuex-connector) 280 | 281 | 欢迎 Star 282 | 283 | ## 扫一扫关注迅雷前端公众号 284 | 285 | ![](https://user-gold-cdn.xitu.io/2017/9/18/a61c018adbf0a3e865643c51e91251bb?imageView2/0/w/1280/h/960/format/webp/ignore-error/1) 286 | 287 | > **作者**：binggg 288 | > 289 | > **校对**：珈蓝 290 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-vuex-container-component/823dd0091f63a95ada1b7c0d67d9693974908736/build/logo.png -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js' 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js', 38 | '@': resolve('src'), 39 | } 40 | }, 41 | module: { 42 | rules: [ 43 | ...(config.dev.useEslint ? [createLintingRule()] : []), 44 | { 45 | test: /\.vue$/, 46 | loader: 'vue-loader', 47 | options: vueLoaderConfig 48 | }, 49 | { 50 | test: /\.js$/, 51 | loader: 'babel-loader', 52 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 53 | }, 54 | { 55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 56 | loader: 'url-loader', 57 | options: { 58 | limit: 10000, 59 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 60 | } 61 | }, 62 | { 63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 64 | loader: 'url-loader', 65 | options: { 66 | limit: 10000, 67 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 68 | } 69 | }, 70 | { 71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 72 | loader: 'url-loader', 73 | options: { 74 | limit: 10000, 75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 76 | } 77 | } 78 | ] 79 | }, 80 | node: { 81 | // prevent webpack from injecting useless setImmediate polyfill because Vue 82 | // source contains it (although only uses it if it's native). 83 | setImmediate: false, 84 | // prevent webpack from injecting mocks to Node native modules 85 | // that does not make sense for the client 86 | dgram: 'empty', 87 | fs: 'empty', 88 | net: 'empty', 89 | tls: 'empty', 90 | child_process: 'empty' 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | minify: { 68 | removeComments: true, 69 | collapseWhitespace: true, 70 | removeAttributeQuotes: true 71 | // more options: 72 | // https://github.com/kangax/html-minifier#options-quick-reference 73 | }, 74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 75 | chunksSortMode: 'dependency' 76 | }), 77 | // keep module.id stable when vendor modules does not change 78 | new webpack.HashedModuleIdsPlugin(), 79 | // enable scope hoisting 80 | new webpack.optimize.ModuleConcatenationPlugin(), 81 | // split vendor js into its own file 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'vendor', 84 | minChunks (module) { 85 | // any required modules inside node_modules are extracted to vendor 86 | return ( 87 | module.resource && 88 | /\.js$/.test(module.resource) && 89 | module.resource.indexOf( 90 | path.join(__dirname, '../node_modules') 91 | ) === 0 92 | ) 93 | } 94 | }), 95 | // extract webpack runtime and module manifest to its own file in order to 96 | // prevent vendor hash from being updated whenever app bundle is updated 97 | new webpack.optimize.CommonsChunkPlugin({ 98 | name: 'manifest', 99 | minChunks: Infinity 100 | }), 101 | // This instance extracts shared chunks from code splitted chunks and bundles them 102 | // in a separate chunk, similar to the vendor chunk 103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 104 | new webpack.optimize.CommonsChunkPlugin({ 105 | name: 'app', 106 | async: 'vendor-async', 107 | children: true, 108 | minChunks: 3 109 | }), 110 | 111 | // copy custom static assets 112 | new CopyWebpackPlugin([ 113 | { 114 | from: path.resolve(__dirname, '../static'), 115 | to: config.build.assetsSubDirectory, 116 | ignore: ['.*'] 117 | } 118 | ]) 119 | ] 120 | }) 121 | 122 | if (config.build.productionGzip) { 123 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 124 | 125 | webpackConfig.plugins.push( 126 | new CompressionWebpackPlugin({ 127 | asset: '[path].gz[query]', 128 | algorithm: 'gzip', 129 | test: new RegExp( 130 | '\\.(' + 131 | config.build.productionGzipExtensions.join('|') + 132 | ')$' 133 | ), 134 | threshold: 10240, 135 | minRatio: 0.8 136 | }) 137 | ) 138 | } 139 | 140 | if (config.build.bundleAnalyzerReport) { 141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 143 | } 144 | 145 | module.exports = webpackConfig 146 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'cheap-module-eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | cssSourceMap: true 44 | }, 45 | 46 | build: { 47 | // Template for index.html 48 | index: path.resolve(__dirname, '../dist/index.html'), 49 | 50 | // Paths 51 | assetsRoot: path.resolve(__dirname, '../dist'), 52 | assetsSubDirectory: 'static', 53 | assetsPublicPath: './', 54 | 55 | /** 56 | * Source Maps 57 | */ 58 | 59 | productionSourceMap: true, 60 | // https://webpack.js.org/configuration/devtool/#production 61 | devtool: '#source-map', 62 | 63 | // Gzip off by default as many popular static hosts such as 64 | // Surge or Netlify already gzip all static assets for you. 65 | // Before setting to `true`, make sure to: 66 | // npm install --save-dev compression-webpack-plugin 67 | productionGzip: false, 68 | productionGzipExtensions: ['js', 'css'], 69 | 70 | // Run the build command with an extra argument to 71 | // View the bundle analyzer report after build finishes: 72 | // `npm run build --report` 73 | // Set to `true` or `false` to always turn it on or off 74 | bundleAnalyzerReport: process.env.npm_config_report 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | vue-vuex-container-component
-------------------------------------------------------------------------------- /dist/static/css/app.ec918186328f90b61bd3061bcbad4e98.css: -------------------------------------------------------------------------------- 1 | body{font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#34495e;background-color:#fff;margin:0}.wrapper{width:320px;margin:0 auto}h1{font-weight:300;margin:30px 0;font-size:2em}h2{color:#42b983;font-size:1.5em;font-weight:400;margin:0;padding:.5em 0} 2 | /*# sourceMappingURL=app.ec918186328f90b61bd3061bcbad4e98.css.map */ -------------------------------------------------------------------------------- /dist/static/css/app.ec918186328f90b61bd3061bcbad4e98.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["app.ec918186328f90b61bd3061bcbad4e98.css"],"names":[],"mappings":"AACA,KACE,4DAAoE,AACpE,eAAgB,AAChB,mCAAoC,AACpC,kCAAmC,AACnC,cAAe,AACf,sBAAuB,AACvB,QAAU,CACX,AACD,SACE,YAAa,AACb,aAAe,CAChB,AACD,GACE,gBAAiB,AACjB,cAAe,AACf,aAAe,CAChB,AACD,GACE,cAAe,AACf,gBAAiB,AACjB,gBAAiB,AACjB,SAAU,AACV,cAAiB,CAClB","file":"app.ec918186328f90b61bd3061bcbad4e98.css","sourcesContent":["\nbody {\n font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;\n font-size: 14px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n color: #34495e;\n background-color: #fff;\n margin: 0;\n}\n.wrapper {\n width: 320px;\n margin: 0 auto;\n}\nh1 {\n font-weight: 300;\n margin: 30px 0;\n font-size: 2em;\n}\nh2 {\n color: #42b983;\n font-size: 1.5em;\n font-weight: 400;\n margin: 0;\n padding: 0.5em 0;\n}\n"]} -------------------------------------------------------------------------------- /dist/static/js/app.4051c62b7016763df983.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{NHnr:function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e("7+uW"),s={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("ul",t._l(t.comments,function(n){return e("li",{key:n.id},[t._v("\n "+t._s(n.body)+"—"+t._s(n.author)+"\n ")])}))},staticRenderFns:[]},r=e("VU/8")({name:"CommentList",computed:{comments:function(){return this.$store.state.comments}},mounted:function(){this.$store.dispatch("fetchComments")}},s,!1,null,null,null).exports,m={name:"CommentListNew",props:{comments:{type:Array,default:function(){return[]},validator:function(t){return t.every(function(t){return"body"in t&&"author"in t&&"id"in t})}},fetch:{type:Function,default:function(){}},type:{type:String}},mounted:function(){this.fetch()}},i={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("ul",[t._v("\n "+t._s(t.type)+" 评论\n "),t._l(t.comments,function(n){return e("li",{key:n.id},[t._v("\n "+t._s(n.body)+"—"+t._s(n.author)+"\n ")])})],2)},staticRenderFns:[]},c=e("VU/8")(m,i,!1,null,null,null).exports,u={name:"CommentListContainer",components:{CommentList:c},computed:{comments:function(){return this.$store.state.comments}},methods:{fetchComments:function(){return this.$store.dispatch("fetchComments")}}},a={render:function(){var t=this.$createElement;return(this._self._c||t)("CommentList",{attrs:{fetch:this.fetchComments,comments:this.comments}})},staticRenderFns:[]},l=e("VU/8")(u,a,!1,null,null,null).exports,p=e("NYxO"),f=e("eOgT"),h=e.n(f);o.a.use(p.a);var d=new p.a.Store({state:{comments:[]},mutations:{setComments:function(t,n){t.comments=n}},actions:{fetchComments:function(t){var n=t.commit;setTimeout(function(){n("setComments",[{body:"霸气侧漏",author:"雷叔",id:1123},{body:"机智如我",author:"蕾妹",id:1124}])})}}}),_=d,C=new h.a(d).connect({mapStateToProps:{comments:function(t){return t.comments}},mapDispatchToProps:{fetch:"fetchComments"}})(c),v={components:{CommentList:r,CommentListContainer:l,ConnectCommentListContainer:e("VU/8")(C,null,!1,null,null,null).exports}},y={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",{staticClass:"wrapper"},[e("h1",[t._v("容器组件-展示组件模式")]),t._v(" "),e("h2",[t._v("没有容器组件")]),t._v(" "),e("CommentList",{attrs:{type:"热门"}}),t._v(" "),e("h2",[t._v("手动实现容器组件与store连接")]),t._v(" "),e("CommentListContainer",{attrs:{type:"热门"}}),t._v(" "),e("h2",[t._v("通过 @xunlei/vuex-connector 实现容器组件")]),t._v(" "),e("ConnectCommentListContainer",{attrs:{type:"热门"}})],1)},staticRenderFns:[]};var L=e("VU/8")(v,y,!1,function(t){e("O1RA")},null,null).exports;o.a.config.productionTip=!1,new o.a({el:"#app",components:{App:L},template:"",store:_})},O1RA:function(t,n){}},["NHnr"]); 2 | //# sourceMappingURL=app.4051c62b7016763df983.js.map -------------------------------------------------------------------------------- /dist/static/js/app.4051c62b7016763df983.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/components/CommentList.vue?cbcf","webpack:///./src/components/CommentList.vue","webpack:///src/components/CommentList.vue","webpack:///src/components/CommentListNew.vue","webpack:///./src/components/CommentListNew.vue?d10e","webpack:///./src/components/CommentListNew.vue","webpack:///src/containers/CommentListContainer.vue","webpack:///./src/containers/CommentListContainer.vue?fda4","webpack:///./src/containers/CommentListContainer.vue","webpack:///./src/store/index.js","webpack:///src/containers/ConnectCommentListContainer.vue","webpack:///src/App.vue","webpack:///./src/containers/ConnectCommentListContainer.vue","webpack:///./src/App.vue?7522","webpack:///./src/App.vue","webpack:///./src/main.js"],"names":["components_CommentList","render","_vm","this","_h","$createElement","_c","_self","_l","comment","key","id","_v","_s","body","author","staticRenderFns","src_components_CommentList","__webpack_require__","normalizeComponent","name","computed","comments","$store","state","mounted","dispatch","CommentListNew","props","type","Array","default","validator","every","fetch","Function","String","components_CommentListNew","src_components_CommentListNew","CommentListNew_normalizeComponent","CommentListContainer","components","CommentList","methods","fetchComments","containers_CommentListContainer","attrs","src_containers_CommentListContainer","CommentListContainer_normalizeComponent","vue_esm","use","vuex_esm","store","Store","mutations","setComments","actions","_ref","commit","setTimeout","src_store","ConnectCommentListContainer","lib_default","a","connect","mapStateToProps","mapDispatchToProps","App","ConnectCommentListContainer_normalizeComponent","selectortype_template_index_0_src_App","staticClass","src_App","App_normalizeComponent","ssrContext","config","productionTip","el","template"],"mappings":"qHAGAA,GADiBC,OAFjB,WAA0B,IAAAC,EAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,KAAAJ,EAAAM,GAAAN,EAAA,kBAAAO,GAAuD,OAAAH,EAAA,MAAgBI,IAAAD,EAAAE,KAAeT,EAAAU,GAAA,SAAAV,EAAAW,GAAAJ,EAAAK,MAAA,IAAAZ,EAAAW,GAAAJ,EAAAM,QAAA,cAE9JC,oBCqBjBC,EAvBAC,EAAA,OAcAC,ECFAC,KAAA,cAEAC,UACAC,SADA,WAEA,OAAAnB,KAAAoB,OAAAC,MAAAF,WAIAG,QATA,WAUAtB,KAAAoB,OAAAG,SAAA,mBDLA1B,GATA,EAEA,KAEA,KAEA,MAUA,QEXA2B,GACAP,KAAA,iBAEAQ,OACAN,UACAO,KAAAC,MACAC,QAFA,WAGA,UAEAC,UALA,SAKAV,GACA,OAAAA,EAAAW,MACA,SAAAxB,GAAA,eAAAA,GAAA,WAAAA,GAAA,OAAAA,MAIAyB,OACAL,KAAAM,SACAJ,QAAA,cAEAF,MACAA,KAAAO,SAIAX,QAxBA,WAyBAtB,KAAA+B,UClCAG,GADiBpC,OAFjB,WAA0B,IAAAC,EAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,MAAAJ,EAAAU,GAAA,OAAAV,EAAAW,GAAAX,EAAA2B,MAAA,WAAA3B,EAAAM,GAAAN,EAAA,kBAAAO,GAAkG,OAAAH,EAAA,MAAgBI,IAAAD,EAAAE,KAAeT,EAAAU,GAAA,SAAAV,EAAAW,GAAAJ,EAAAK,MAAA,IAAAZ,EAAAW,GAAAJ,EAAAM,QAAA,aAA4E,IAErRC,oBCqBjBsB,EAvBApB,EAAA,OAcAqB,CACAZ,EACAU,GATA,EAEA,KAEA,KAEA,MAUA,QCbAG,GACApB,KAAA,uBAEAqB,YACAC,YAAAJ,GAGAjB,UACAC,SADA,WAEA,OAAAnB,KAAAoB,OAAAC,MAAAF,WAIAqB,SACAC,cADA,WAEA,OAAAzC,KAAAoB,OAAAG,SAAA,oBCtBAmB,GADiB5C,OAFjB,WAA0B,IAAaG,EAAbD,KAAaE,eAAkD,OAA/DF,KAAuCI,MAAAD,IAAAF,GAAwB,eAAyB0C,OAAOZ,MAA/F/B,KAA+FyC,cAAAtB,SAA/FnB,KAA+FmB,aAExGN,oBCqBjB+B,EAvBA7B,EAAA,OAcA8B,CACAR,EACAK,GATA,EAEA,KAEA,KAEA,MAUA,yCCnBAI,EAAA,EAAIC,IAAIC,EAAA,GAER,IAAMC,EAAQ,IAAID,EAAA,EAAKE,OACrB7B,OACEF,aAGFgC,WACEC,YADS,SACI/B,EAAOF,GAClBE,EAAMF,SAAWA,IAIrBkC,SACEZ,cADO,SAAAa,GACoB,IAAVC,EAAUD,EAAVC,OACfC,WAAW,WACTD,EAAO,gBAEH5C,KAAM,OACNC,OAAQ,KACRJ,GAAI,OAGJG,KAAM,OACNC,OAAQ,KACRJ,GAAI,cAUhBiD,EAAA,ECnCAC,EDiCyB,IAAIC,EAAAC,EAAcX,GCjC3CY,SACAC,iBACA3C,SAAA,SAAAE,GAAA,OAAAA,EAAAF,WAEA4C,oBACAhC,MAAA,kBALA,CAOAI,GCSA6B,GACA1B,YACAC,YAAAzB,EACAuB,qBAAAO,EACAc,4BCxBA3C,EAAA,OAcAkD,CACAP,EAVA,MAEA,EAEA,KAEA,KAEA,MAUA,UCpBAQ,GADiBpE,OAFjB,WAA0B,IAAAC,EAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,OAAiBgE,YAAA,YAAsBhE,EAAA,MAAAJ,EAAAU,GAAA,iBAAAV,EAAAU,GAAA,KAAAN,EAAA,MAAAJ,EAAAU,GAAA,YAAAV,EAAAU,GAAA,KAAAN,EAAA,eAAyGwC,OAAOjB,KAAA,QAAa3B,EAAAU,GAAA,KAAAN,EAAA,MAAAJ,EAAAU,GAAA,sBAAAV,EAAAU,GAAA,KAAAN,EAAA,wBAA2FwC,OAAOjB,KAAA,QAAa3B,EAAAU,GAAA,KAAAN,EAAA,MAAAJ,EAAAU,GAAA,sCAAAV,EAAAU,GAAA,KAAAN,EAAA,+BAAkHwC,OAAOjB,KAAA,SAAa,IAEjeb,oBCCjB,IAuBAuD,EAvBArD,EAAA,OAcAsD,CACAL,EACAE,GATA,EAVA,SAAAI,GACAvD,EAAA,SAaA,KAEA,MAUA,QCpBA+B,EAAA,EAAIyB,OAAOC,eAAgB,EAG3B,IAAI1B,EAAA,GACF2B,GAAI,OACJnC,YAAc0B,IAAAI,GACdM,SAAU,SACVzB,MAAAQ","file":"static/js/app.4051c62b7016763df983.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',_vm._l((_vm.comments),function(comment){return _c('li',{key:comment.id},[_vm._v(\"\\n \"+_vm._s(comment.body)+\"—\"+_vm._s(comment.author)+\"\\n \")])}))}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-658c3129\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/CommentList.vue\n// module id = null\n// module chunks = ","var normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentList.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentList.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-658c3129\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./CommentList.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/CommentList.vue\n// module id = null\n// module chunks = ","\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/components/CommentList.vue","\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/components/CommentListNew.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',[_vm._v(\"\\n \"+_vm._s(_vm.type)+\" 评论\\n \"),_vm._l((_vm.comments),function(comment){return _c('li',{key:comment.id},[_vm._v(\"\\n \"+_vm._s(comment.body)+\"—\"+_vm._s(comment.author)+\"\\n \")])})],2)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-539b6896\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/CommentListNew.vue\n// module id = null\n// module chunks = ","var normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentListNew.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentListNew.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-539b6896\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./CommentListNew.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/CommentListNew.vue\n// module id = null\n// module chunks = ","\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/containers/CommentListContainer.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('CommentList',{attrs:{\"fetch\":_vm.fetchComments,\"comments\":_vm.comments}})}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-69b51114\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/containers/CommentListContainer.vue\n// module id = null\n// module chunks = ","var normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentListContainer.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentListContainer.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-69b51114\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./CommentListContainer.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/containers/CommentListContainer.vue\n// module id = null\n// module chunks = ","import Vue from 'vue'\nimport Vuex from 'vuex'\nimport VuexConnector from '@xunlei/vuex-connector'\n\nVue.use(Vuex)\n\nconst store = new Vuex.Store({\n state: {\n comments: []\n },\n\n mutations: {\n setComments (state, comments) {\n state.comments = comments\n }\n },\n\n actions: {\n fetchComments ({ commit }) {\n setTimeout(() => {\n commit('setComments', [\n {\n body: '霸气侧漏',\n author: '雷叔',\n id: 1123\n },\n {\n body: '机智如我',\n author: '蕾妹',\n id: 1124\n }\n ])\n })\n }\n }\n})\n\nexport const connector = new VuexConnector(store)\n\nexport default store\n\n\n\n// WEBPACK FOOTER //\n// ./src/store/index.js","\n\n\n\n// WEBPACK FOOTER //\n// src/containers/ConnectCommentListContainer.vue","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/App.vue","var normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./ConnectCommentListContainer.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./ConnectCommentListContainer.vue\"\n/* template */\nvar __vue_template__ = null\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/containers/ConnectCommentListContainer.vue\n// module id = null\n// module chunks = ","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"wrapper\"},[_c('h1',[_vm._v(\"容器组件-展示组件模式\")]),_vm._v(\" \"),_c('h2',[_vm._v(\"没有容器组件\")]),_vm._v(\" \"),_c('CommentList',{attrs:{\"type\":\"热门\"}}),_vm._v(\" \"),_c('h2',[_vm._v(\"手动实现容器组件与store连接\")]),_vm._v(\" \"),_c('CommentListContainer',{attrs:{\"type\":\"热门\"}}),_vm._v(\" \"),_c('h2',[_vm._v(\"通过 @xunlei/vuex-connector 实现容器组件\")]),_vm._v(\" \"),_c('ConnectCommentListContainer',{attrs:{\"type\":\"热门\"}})],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-4f8776f0\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-4f8776f0\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n}\nvar normalizeComponent = require(\"!../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\nimport __vue_script__ from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\n/* template */\nimport __vue_template__ from \"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-4f8776f0\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = null\n// module chunks = ","// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue'\nimport App from './App'\nimport store from './store'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vue({\n el: '#app',\n components: { App },\n template: '',\n store\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/static/js/manifest.3ad1d5771e9b13dbdad2.js: -------------------------------------------------------------------------------- 1 | !function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a=0&&Math.floor(e)===e&&isFinite(t)}function p(t){return null==t?"":"object"==typeof t?JSON.stringify(t,null,2):String(t)}function d(t){var e=parseFloat(t);return isNaN(e)?t:e}function v(t,e){for(var n=Object.create(null),r=t.split(","),i=0;i-1)return t.splice(n,1)}}var g=Object.prototype.hasOwnProperty;function _(t,e){return g.call(t,e)}function b(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var $=/-(\w)/g,w=b(function(t){return t.replace($,function(t,e){return e?e.toUpperCase():""})}),C=b(function(t){return t.charAt(0).toUpperCase()+t.slice(1)}),x=/\B([A-Z])/g,k=b(function(t){return t.replace(x,"-$1").toLowerCase()});var O=Function.prototype.bind?function(t,e){return t.bind(e)}:function(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n};function A(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function S(t,e){for(var n in e)t[n]=e[n];return t}function T(t){for(var e={},n=0;n0,Z=q&&q.indexOf("edge/")>0,Y=(q&&q.indexOf("android"),q&&/iphone|ipad|ipod|ios/.test(q)||"ios"===J),Q=(q&&/chrome\/\d+/.test(q),{}.watch),tt=!1;if(K)try{var et={};Object.defineProperty(et,"passive",{get:function(){tt=!0}}),window.addEventListener("test-passive",null,et)}catch(t){}var nt=function(){return void 0===V&&(V=!K&&!G&&void 0!==t&&"server"===t.process.env.VUE_ENV),V},rt=K&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function it(t){return"function"==typeof t&&/native code/.test(t.toString())}var ot,at="undefined"!=typeof Symbol&&it(Symbol)&&"undefined"!=typeof Reflect&&it(Reflect.ownKeys);ot="undefined"!=typeof Set&&it(Set)?Set:function(){function t(){this.set=Object.create(null)}return t.prototype.has=function(t){return!0===this.set[t]},t.prototype.add=function(t){this.set[t]=!0},t.prototype.clear=function(){this.set=Object.create(null)},t}();var st=E,ct=0,ut=function(){this.id=ct++,this.subs=[]};ut.prototype.addSub=function(t){this.subs.push(t)},ut.prototype.removeSub=function(t){y(this.subs,t)},ut.prototype.depend=function(){ut.target&&ut.target.addDep(this)},ut.prototype.notify=function(){for(var t=this.subs.slice(),e=0,n=t.length;e-1)if(o&&!_(i,"default"))a=!1;else if(""===a||a===k(t)){var c=Ut(String,i.type);(c<0||s0&&(le((u=t(u,(n||"")+"_"+c))[0])&&le(f)&&(s[l]=mt(f.text+u[0].text),u.shift()),s.push.apply(s,u)):a(u)?le(f)?s[l]=mt(f.text+u):""!==u&&s.push(mt(u)):le(u)&&le(f)?s[l]=mt(f.text+u.text):(o(e._isVList)&&i(u.tag)&&r(u.key)&&i(n)&&(u.key="__vlist"+n+"_"+c+"__"),s.push(u)));return s}(t):void 0}function le(t){return i(t)&&i(t.text)&&!1===t.isComment}function fe(t,e){return(t.__esModule||at&&"Module"===t[Symbol.toStringTag])&&(t=t.default),s(t)?e.extend(t):t}function pe(t){return t.isComment&&t.asyncFactory}function de(t){if(Array.isArray(t))for(var e=0;eTe&&xe[n].id>t.id;)n--;xe.splice(n+1,0,t)}else xe.push(t);Ae||(Ae=!0,te(Ee))}}(this)},Me.prototype.run=function(){if(this.active){var t=this.get();if(t!==this.value||s(t)||this.deep){var e=this.value;if(this.value=t,this.user)try{this.cb.call(this.vm,t,e)}catch(t){Bt(t,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,t,e)}}},Me.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},Me.prototype.depend=function(){for(var t=this.deps.length;t--;)this.deps[t].depend()},Me.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||y(this.vm._watchers,this);for(var t=this.deps.length;t--;)this.deps[t].removeSub(this);this.active=!1}};var Ne={enumerable:!0,configurable:!0,get:E,set:E};function Le(t,e,n){Ne.get=function(){return this[e][n]},Ne.set=function(t){this[e][n]=t},Object.defineProperty(t,n,Ne)}function Pe(t){t._watchers=[];var e=t.$options;e.props&&function(t,e){var n=t.$options.propsData||{},r=t._props={},i=t.$options._propKeys=[];t.$parent&&wt(!1);var o=function(o){i.push(o);var a=Rt(o,e,n,t);At(r,o,a),o in t||Le(t,"_props",o)};for(var a in e)o(a);wt(!0)}(t,e.props),e.methods&&function(t,e){t.$options.props;for(var n in e)t[n]=null==e[n]?E:O(e[n],t)}(t,e.methods),e.data?function(t){var e=t.$options.data;u(e=t._data="function"==typeof e?function(t,e){ft();try{return t.call(e,e)}catch(t){return Bt(t,e,"data()"),{}}finally{pt()}}(e,t):e||{})||(e={});var n=Object.keys(e),r=t.$options.props,i=(t.$options.methods,n.length);for(;i--;){var o=n[i];0,r&&_(r,o)||H(o)||Le(t,"_data",o)}Ot(e,!0)}(t):Ot(t._data={},!0),e.computed&&function(t,e){var n=t._computedWatchers=Object.create(null),r=nt();for(var i in e){var o=e[i],a="function"==typeof o?o:o.get;0,r||(n[i]=new Me(t,a||E,E,Ie)),i in t||De(t,i,o)}}(t,e.computed),e.watch&&e.watch!==Q&&function(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var i=0;i=0||n.indexOf(t[i])<0)&&r.push(t[i]);return r}return t}function pn(t){this._init(t)}function dn(t){t.cid=0;var e=1;t.extend=function(t){t=t||{};var n=this,r=n.cid,i=t._Ctor||(t._Ctor={});if(i[r])return i[r];var o=t.name||n.options.name;var a=function(t){this._init(t)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=e++,a.options=It(n.options,t),a.super=n,a.options.props&&function(t){var e=t.options.props;for(var n in e)Le(t.prototype,"_props",n)}(a),a.options.computed&&function(t){var e=t.options.computed;for(var n in e)De(t.prototype,n,e[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,D.forEach(function(t){a[t]=n[t]}),o&&(a.options.components[o]=a),a.superOptions=n.options,a.extendOptions=t,a.sealedOptions=S({},a.options),i[r]=a,a}}function vn(t){return t&&(t.Ctor.options.name||t.tag)}function hn(t,e){return Array.isArray(t)?t.indexOf(e)>-1:"string"==typeof t?t.split(",").indexOf(e)>-1:!!l(t)&&t.test(e)}function mn(t,e){var n=t.cache,r=t.keys,i=t._vnode;for(var o in n){var a=n[o];if(a){var s=vn(a.componentOptions);s&&!e(s)&&yn(n,o,r,i)}}}function yn(t,e,n,r){var i=t[e];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),t[e]=null,y(n,e)}!function(t){t.prototype._init=function(t){var e=this;e._uid=un++,e._isVue=!0,t&&t._isComponent?function(t,e){var n=t.$options=Object.create(t.constructor.options),r=e._parentVnode;n.parent=e.parent,n._parentVnode=r,n._parentElm=e._parentElm,n._refElm=e._refElm;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,e.render&&(n.render=e.render,n.staticRenderFns=e.staticRenderFns)}(e,t):e.$options=It(ln(e.constructor),t||{},e),e._renderProxy=e,e._self=e,function(t){var e=t.$options,n=e.parent;if(n&&!e.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(t)}t.$parent=n,t.$root=n?n.$root:t,t.$children=[],t.$refs={},t._watcher=null,t._inactive=null,t._directInactive=!1,t._isMounted=!1,t._isDestroyed=!1,t._isBeingDestroyed=!1}(e),function(t){t._events=Object.create(null),t._hasHookEvent=!1;var e=t.$options._parentListeners;e&&me(t,e)}(e),function(t){t._vnode=null,t._staticTrees=null;var e=t.$options,r=t.$vnode=e._parentVnode,i=r&&r.context;t.$slots=ye(e._renderChildren,i),t.$scopedSlots=n,t._c=function(e,n,r,i){return cn(t,e,n,r,i,!1)},t.$createElement=function(e,n,r,i){return cn(t,e,n,r,i,!0)};var o=r&&r.data;At(t,"$attrs",o&&o.attrs||n,null,!0),At(t,"$listeners",e._parentListeners||n,null,!0)}(e),Ce(e,"beforeCreate"),function(t){var e=He(t.$options.inject,t);e&&(wt(!1),Object.keys(e).forEach(function(n){At(t,n,e[n])}),wt(!0))}(e),Pe(e),function(t){var e=t.$options.provide;e&&(t._provided="function"==typeof e?e.call(t):e)}(e),Ce(e,"created"),e.$options.el&&e.$mount(e.$options.el)}}(pn),function(t){var e={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(t.prototype,"$data",e),Object.defineProperty(t.prototype,"$props",n),t.prototype.$set=St,t.prototype.$delete=Tt,t.prototype.$watch=function(t,e,n){if(u(e))return Fe(this,t,e,n);(n=n||{}).user=!0;var r=new Me(this,t,e,n);return n.immediate&&e.call(this,r.value),function(){r.teardown()}}}(pn),function(t){var e=/^hook:/;t.prototype.$on=function(t,n){if(Array.isArray(t))for(var r=0,i=t.length;r1?A(n):n;for(var r=A(arguments,1),i=0,o=n.length;iparseInt(this.max)&&yn(a,s[0],s,this._vnode)),e.data.keepAlive=!0}return e||t&&t[0]}}};!function(t){var e={get:function(){return F}};Object.defineProperty(t,"config",e),t.util={warn:st,extend:S,mergeOptions:It,defineReactive:At},t.set=St,t.delete=Tt,t.nextTick=te,t.options=Object.create(null),D.forEach(function(e){t.options[e+"s"]=Object.create(null)}),t.options._base=t,S(t.options.components,_n),function(t){t.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=A(arguments,1);return n.unshift(this),"function"==typeof t.install?t.install.apply(t,n):"function"==typeof t&&t.apply(null,n),e.push(t),this}}(t),function(t){t.mixin=function(t){return this.options=It(this.options,t),this}}(t),dn(t),function(t){D.forEach(function(e){t[e]=function(t,n){return n?("component"===e&&u(n)&&(n.name=n.name||t,n=this.options._base.extend(n)),"directive"===e&&"function"==typeof n&&(n={bind:n,update:n}),this.options[e+"s"][t]=n,n):this.options[e+"s"][t]}})}(t)}(pn),Object.defineProperty(pn.prototype,"$isServer",{get:nt}),Object.defineProperty(pn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(pn,"FunctionalRenderContext",{value:Qe}),pn.version="2.5.16";var bn=v("style,class"),$n=v("input,textarea,option,select,progress"),wn=function(t,e,n){return"value"===n&&$n(t)&&"button"!==e||"selected"===n&&"option"===t||"checked"===n&&"input"===t||"muted"===n&&"video"===t},Cn=v("contenteditable,draggable,spellcheck"),xn=v("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),kn="http://www.w3.org/1999/xlink",On=function(t){return":"===t.charAt(5)&&"xlink"===t.slice(0,5)},An=function(t){return On(t)?t.slice(6,t.length):""},Sn=function(t){return null==t||!1===t};function Tn(t){for(var e=t.data,n=t,r=t;i(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(e=En(r.data,e));for(;i(n=n.parent);)n&&n.data&&(e=En(e,n.data));return function(t,e){if(i(t)||i(e))return jn(t,Mn(e));return""}(e.staticClass,e.class)}function En(t,e){return{staticClass:jn(t.staticClass,e.staticClass),class:i(t.class)?[t.class,e.class]:e.class}}function jn(t,e){return t?e?t+" "+e:t:e||""}function Mn(t){return Array.isArray(t)?function(t){for(var e,n="",r=0,o=t.length;r-1?rr(t,e,n):xn(e)?Sn(n)?t.removeAttribute(e):(n="allowfullscreen"===e&&"EMBED"===t.tagName?"true":e,t.setAttribute(e,n)):Cn(e)?t.setAttribute(e,Sn(n)||"false"===n?"false":"true"):On(e)?Sn(n)?t.removeAttributeNS(kn,An(e)):t.setAttributeNS(kn,e,n):rr(t,e,n)}function rr(t,e,n){if(Sn(n))t.removeAttribute(e);else{if(W&&!X&&"TEXTAREA"===t.tagName&&"placeholder"===e&&!t.__ieph){var r=function(e){e.stopImmediatePropagation(),t.removeEventListener("input",r)};t.addEventListener("input",r),t.__ieph=!0}t.setAttribute(e,n)}}var ir={create:er,update:er};function or(t,e){var n=e.elm,o=e.data,a=t.data;if(!(r(o.staticClass)&&r(o.class)&&(r(a)||r(a.staticClass)&&r(a.class)))){var s=Tn(e),c=n._transitionClasses;i(c)&&(s=jn(s,Mn(c))),s!==n._prevClass&&(n.setAttribute("class",s),n._prevClass=s)}}var ar,sr,cr,ur,lr,fr,pr={create:or,update:or},dr=/[\w).+\-_$\]]/;function vr(t){var e,n,r,i,o,a=!1,s=!1,c=!1,u=!1,l=0,f=0,p=0,d=0;for(r=0;r=0&&" "===(h=t.charAt(v));v--);h&&dr.test(h)||(u=!0)}}else void 0===i?(d=r+1,i=t.slice(0,r).trim()):m();function m(){(o||(o=[])).push(t.slice(d,r).trim()),d=r+1}if(void 0===i?i=t.slice(0,r).trim():0!==d&&m(),o)for(r=0;r-1?{exp:t.slice(0,ur),key:'"'+t.slice(ur+1)+'"'}:{exp:t,key:null};sr=t,ur=lr=fr=0;for(;!Sr();)Tr(cr=Ar())?jr(cr):91===cr&&Er(cr);return{exp:t.slice(0,lr),key:t.slice(lr+1,fr)}}(t);return null===n.key?t+"="+e:"$set("+n.exp+", "+n.key+", "+e+")"}function Ar(){return sr.charCodeAt(++ur)}function Sr(){return ur>=ar}function Tr(t){return 34===t||39===t}function Er(t){var e=1;for(lr=ur;!Sr();)if(Tr(t=Ar()))jr(t);else if(91===t&&e++,93===t&&e--,0===e){fr=ur;break}}function jr(t){for(var e=t;!Sr()&&(t=Ar())!==e;);}var Mr,Nr="__r",Lr="__c";function Pr(t,e,n,r,i){var o;e=(o=e)._withTask||(o._withTask=function(){Xt=!0;var t=o.apply(null,arguments);return Xt=!1,t}),n&&(e=function(t,e,n){var r=Mr;return function i(){null!==t.apply(null,arguments)&&Ir(e,i,n,r)}}(e,t,r)),Mr.addEventListener(t,e,tt?{capture:r,passive:i}:r)}function Ir(t,e,n,r){(r||Mr).removeEventListener(t,e._withTask||e,n)}function Dr(t,e){if(!r(t.data.on)||!r(e.data.on)){var n=e.data.on||{},o=t.data.on||{};Mr=e.elm,function(t){if(i(t[Nr])){var e=W?"change":"input";t[e]=[].concat(t[Nr],t[e]||[]),delete t[Nr]}i(t[Lr])&&(t.change=[].concat(t[Lr],t.change||[]),delete t[Lr])}(n),ae(n,o,Pr,Ir,e.context),Mr=void 0}}var Rr={create:Dr,update:Dr};function Fr(t,e){if(!r(t.data.domProps)||!r(e.data.domProps)){var n,o,a=e.elm,s=t.data.domProps||{},c=e.data.domProps||{};for(n in i(c.__ob__)&&(c=e.data.domProps=S({},c)),s)r(c[n])&&(a[n]="");for(n in c){if(o=c[n],"textContent"===n||"innerHTML"===n){if(e.children&&(e.children.length=0),o===s[n])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if("value"===n){a._value=o;var u=r(o)?"":String(o);Hr(a,u)&&(a.value=u)}else a[n]=o}}}function Hr(t,e){return!t.composing&&("OPTION"===t.tagName||function(t,e){var n=!0;try{n=document.activeElement!==t}catch(t){}return n&&t.value!==e}(t,e)||function(t,e){var n=t.value,r=t._vModifiers;if(i(r)){if(r.lazy)return!1;if(r.number)return d(n)!==d(e);if(r.trim)return n.trim()!==e.trim()}return n!==e}(t,e))}var Ur={create:Fr,update:Fr},Br=b(function(t){var e={},n=/:(.+)/;return t.split(/;(?![^(]*\))/g).forEach(function(t){if(t){var r=t.split(n);r.length>1&&(e[r[0].trim()]=r[1].trim())}}),e});function Vr(t){var e=zr(t.style);return t.staticStyle?S(t.staticStyle,e):e}function zr(t){return Array.isArray(t)?T(t):"string"==typeof t?Br(t):t}var Kr,Gr=/^--/,Jr=/\s*!important$/,qr=function(t,e,n){if(Gr.test(e))t.style.setProperty(e,n);else if(Jr.test(n))t.style.setProperty(e,n.replace(Jr,""),"important");else{var r=Xr(e);if(Array.isArray(n))for(var i=0,o=n.length;i-1?e.split(/\s+/).forEach(function(e){return t.classList.add(e)}):t.classList.add(e);else{var n=" "+(t.getAttribute("class")||"")+" ";n.indexOf(" "+e+" ")<0&&t.setAttribute("class",(n+e).trim())}}function ti(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(/\s+/).forEach(function(e){return t.classList.remove(e)}):t.classList.remove(e),t.classList.length||t.removeAttribute("class");else{for(var n=" "+(t.getAttribute("class")||"")+" ",r=" "+e+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?t.setAttribute("class",n):t.removeAttribute("class")}}function ei(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&S(e,ni(t.name||"v")),S(e,t),e}return"string"==typeof t?ni(t):void 0}}var ni=b(function(t){return{enterClass:t+"-enter",enterToClass:t+"-enter-to",enterActiveClass:t+"-enter-active",leaveClass:t+"-leave",leaveToClass:t+"-leave-to",leaveActiveClass:t+"-leave-active"}}),ri=K&&!X,ii="transition",oi="animation",ai="transition",si="transitionend",ci="animation",ui="animationend";ri&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(ai="WebkitTransition",si="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(ci="WebkitAnimation",ui="webkitAnimationEnd"));var li=K?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(t){return t()};function fi(t){li(function(){li(t)})}function pi(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),Qr(t,e))}function di(t,e){t._transitionClasses&&y(t._transitionClasses,e),ti(t,e)}function vi(t,e,n){var r=mi(t,e),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var s=i===ii?si:ui,c=0,u=function(){t.removeEventListener(s,l),n()},l=function(e){e.target===t&&++c>=a&&u()};setTimeout(function(){c0&&(n=ii,l=a,f=o.length):e===oi?u>0&&(n=oi,l=u,f=c.length):f=(n=(l=Math.max(a,u))>0?a>u?ii:oi:null)?n===ii?o.length:c.length:0,{type:n,timeout:l,propCount:f,hasTransform:n===ii&&hi.test(r[ai+"Property"])}}function yi(t,e){for(;t.length1}function Ci(t,e){!0!==e.data.show&&_i(e)}var xi=function(t){var e,n,s={},c=t.modules,u=t.nodeOps;for(e=0;ev?_(t,r(n[y+1])?null:n[y+1].elm,n,d,y,o):d>y&&$(0,e,p,v)}(c,d,v,n,a):i(v)?(i(t.text)&&u.setTextContent(c,""),_(c,null,v,0,v.length-1,n)):i(d)?$(0,d,0,d.length-1):i(t.text)&&u.setTextContent(c,""):t.text!==e.text&&u.setTextContent(c,e.text),i(p)&&i(l=p.hook)&&i(l=l.postpatch)&&l(t,e)}}}function k(t,e,n){if(o(n)&&i(t.parent))t.parent.data.pendingInsert=e;else for(var r=0;r-1,a.selected!==o&&(a.selected=o);else if(N(Ti(a),r))return void(t.selectedIndex!==s&&(t.selectedIndex=s));i||(t.selectedIndex=-1)}}function Si(t,e){return e.every(function(e){return!N(e,t)})}function Ti(t){return"_value"in t?t._value:t.value}function Ei(t){t.target.composing=!0}function ji(t){t.target.composing&&(t.target.composing=!1,Mi(t.target,"input"))}function Mi(t,e){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function Ni(t){return!t.componentInstance||t.data&&t.data.transition?t:Ni(t.componentInstance._vnode)}var Li={model:ki,show:{bind:function(t,e,n){var r=e.value,i=(n=Ni(n)).data&&n.data.transition,o=t.__vOriginalDisplay="none"===t.style.display?"":t.style.display;r&&i?(n.data.show=!0,_i(n,function(){t.style.display=o})):t.style.display=r?o:"none"},update:function(t,e,n){var r=e.value;!r!=!e.oldValue&&((n=Ni(n)).data&&n.data.transition?(n.data.show=!0,r?_i(n,function(){t.style.display=t.__vOriginalDisplay}):bi(n,function(){t.style.display="none"})):t.style.display=r?t.__vOriginalDisplay:"none")},unbind:function(t,e,n,r,i){i||(t.style.display=t.__vOriginalDisplay)}}},Pi={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function Ii(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?Ii(de(e.children)):t}function Di(t){var e={},n=t.$options;for(var r in n.propsData)e[r]=t[r];var i=n._parentListeners;for(var o in i)e[w(o)]=i[o];return e}function Ri(t,e){if(/\d-keep-alive$/.test(e.tag))return t("keep-alive",{props:e.componentOptions.propsData})}var Fi={name:"transition",props:Pi,abstract:!0,render:function(t){var e=this,n=this.$slots.default;if(n&&(n=n.filter(function(t){return t.tag||pe(t)})).length){0;var r=this.mode;0;var i=n[0];if(function(t){for(;t=t.parent;)if(t.data.transition)return!0}(this.$vnode))return i;var o=Ii(i);if(!o)return i;if(this._leaving)return Ri(t,i);var s="__transition-"+this._uid+"-";o.key=null==o.key?o.isComment?s+"comment":s+o.tag:a(o.key)?0===String(o.key).indexOf(s)?o.key:s+o.key:o.key;var c=(o.data||(o.data={})).transition=Di(this),u=this._vnode,l=Ii(u);if(o.data.directives&&o.data.directives.some(function(t){return"show"===t.name})&&(o.data.show=!0),l&&l.data&&!function(t,e){return e.key===t.key&&e.tag===t.tag}(o,l)&&!pe(l)&&(!l.componentInstance||!l.componentInstance._vnode.isComment)){var f=l.data.transition=S({},c);if("out-in"===r)return this._leaving=!0,se(f,"afterLeave",function(){e._leaving=!1,e.$forceUpdate()}),Ri(t,i);if("in-out"===r){if(pe(o))return u;var p,d=function(){p()};se(c,"afterEnter",d),se(c,"enterCancelled",d),se(f,"delayLeave",function(t){p=t})}}return i}}},Hi=S({tag:String,moveClass:String},Pi);function Ui(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function Bi(t){t.data.newPos=t.elm.getBoundingClientRect()}function Vi(t){var e=t.data.pos,n=t.data.newPos,r=e.left-n.left,i=e.top-n.top;if(r||i){t.data.moved=!0;var o=t.elm.style;o.transform=o.WebkitTransform="translate("+r+"px,"+i+"px)",o.transitionDuration="0s"}}delete Hi.mode;var zi={Transition:Fi,TransitionGroup:{props:Hi,render:function(t){for(var e=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,i=this.$slots.default||[],o=this.children=[],a=Di(this),s=0;s-1?Rn[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:Rn[t]=/HTMLUnknownElement/.test(e.toString())},S(pn.options.directives,Li),S(pn.options.components,zi),pn.prototype.__patch__=K?xi:E,pn.prototype.$mount=function(t,e){return function(t,e,n){return t.$el=e,t.$options.render||(t.$options.render=ht),Ce(t,"beforeMount"),new Me(t,function(){t._update(t._render(),n)},E,null,!0),n=!1,null==t.$vnode&&(t._isMounted=!0,Ce(t,"mounted")),t}(this,t=t&&K?Hn(t):void 0,e)},K&&setTimeout(function(){F.devtools&&rt&&rt.emit("init",pn)},0);var Ki=/\{\{((?:.|\n)+?)\}\}/g,Gi=/[-.*+?^${}()|[\]\/\\]/g,Ji=b(function(t){var e=t[0].replace(Gi,"\\$&"),n=t[1].replace(Gi,"\\$&");return new RegExp(e+"((?:.|\\n)+?)"+n,"g")});function qi(t,e){var n=e?Ji(e):Ki;if(n.test(t)){for(var r,i,o,a=[],s=[],c=n.lastIndex=0;r=n.exec(t);){(i=r.index)>c&&(s.push(o=t.slice(c,i)),a.push(JSON.stringify(o)));var u=vr(r[1].trim());a.push("_s("+u+")"),s.push({"@binding":u}),c=i+r[0].length}return c\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,ro="[a-zA-Z_][\\w\\-\\.]*",io="((?:"+ro+"\\:)?"+ro+")",oo=new RegExp("^<"+io),ao=/^\s*(\/?)>/,so=new RegExp("^<\\/"+io+"[^>]*>"),co=/^]+>/i,uo=/^",""":'"',"&":"&"," ":"\n"," ":"\t"},mo=/&(?:lt|gt|quot|amp);/g,yo=/&(?:lt|gt|quot|amp|#10|#9);/g,go=v("pre,textarea",!0),_o=function(t,e){return t&&go(t)&&"\n"===e[0]};function bo(t,e){var n=e?yo:mo;return t.replace(n,function(t){return ho[t]})}var $o,wo,Co,xo,ko,Oo,Ao,So,To=/^@|^v-on:/,Eo=/^v-|^@|^:/,jo=/([^]*?)\s+(?:in|of)\s+([^]*)/,Mo=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,No=/^\(|\)$/g,Lo=/:(.*)$/,Po=/^:|^v-bind:/,Io=/\.[^.]+/g,Do=b(Yi);function Ro(t,e,n){return{type:1,tag:t,attrsList:e,attrsMap:function(t){for(var e={},n=0,r=t.length;n]*>)","i")),p=t.replace(f,function(t,n,r){return u=r.length,po(l)||"noscript"===l||(n=n.replace(//g,"$1").replace(//g,"$1")),_o(l,n)&&(n=n.slice(1)),e.chars&&e.chars(n),""});c+=t.length-p.length,t=p,O(l,c-u,c)}else{var d=t.indexOf("<");if(0===d){if(uo.test(t)){var v=t.indexOf("--\x3e");if(v>=0){e.shouldKeepComment&&e.comment(t.substring(4,v)),C(v+3);continue}}if(lo.test(t)){var h=t.indexOf("]>");if(h>=0){C(h+2);continue}}var m=t.match(co);if(m){C(m[0].length);continue}var y=t.match(so);if(y){var g=c;C(y[0].length),O(y[1],g,c);continue}var _=x();if(_){k(_),_o(r,t)&&C(1);continue}}var b=void 0,$=void 0,w=void 0;if(d>=0){for($=t.slice(d);!(so.test($)||oo.test($)||uo.test($)||lo.test($)||(w=$.indexOf("<",1))<0);)d+=w,$=t.slice(d);b=t.substring(0,d),C(d)}d<0&&(b=t,t=""),e.chars&&b&&e.chars(b)}if(t===n){e.chars&&e.chars(t);break}}function C(e){c+=e,t=t.substring(e)}function x(){var e=t.match(oo);if(e){var n,r,i={tagName:e[1],attrs:[],start:c};for(C(e[0].length);!(n=t.match(ao))&&(r=t.match(no));)C(r[0].length),i.attrs.push(r);if(n)return i.unarySlash=n[1],C(n[0].length),i.end=c,i}}function k(t){var n=t.tagName,c=t.unarySlash;o&&("p"===r&&eo(n)&&O(r),s(n)&&r===n&&O(n));for(var u=a(n)||!!c,l=t.attrs.length,f=new Array(l),p=0;p=0&&i[a].lowerCasedTag!==s;a--);else a=0;if(a>=0){for(var u=i.length-1;u>=a;u--)e.end&&e.end(i[u].tag,n,o);i.length=a,r=a&&i[a-1].tag}else"br"===s?e.start&&e.start(t,[],!0,n,o):"p"===s&&(e.start&&e.start(t,[],!1,n,o),e.end&&e.end(t,n,o))}O()}(t,{warn:$o,expectHTML:e.expectHTML,isUnaryTag:e.isUnaryTag,canBeLeftOpenTag:e.canBeLeftOpenTag,shouldDecodeNewlines:e.shouldDecodeNewlines,shouldDecodeNewlinesForHref:e.shouldDecodeNewlinesForHref,shouldKeepComment:e.comments,start:function(t,o,u){var l=r&&r.ns||So(t);W&&"svg"===l&&(o=function(t){for(var e=[],n=0;n-1"+("true"===o?":("+e+")":":_q("+e+","+o+")")),wr(t,"change","var $$a="+e+",$$el=$event.target,$$c=$$el.checked?("+o+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+i+")":i)+",$$i=_i($$a,$$v);if($$el.checked){$$i<0&&("+Or(e,"$$a.concat([$$v])")+")}else{$$i>-1&&("+Or(e,"$$a.slice(0,$$i).concat($$a.slice($$i+1))")+")}}else{"+Or(e,"$$c")+"}",null,!0)}(t,r,i);else if("input"===o&&"radio"===a)!function(t,e,n){var r=n&&n.number,i=Cr(t,"value")||"null";gr(t,"checked","_q("+e+","+(i=r?"_n("+i+")":i)+")"),wr(t,"change",Or(e,i),null,!0)}(t,r,i);else if("input"===o||"textarea"===o)!function(t,e,n){var r=t.attrsMap.type,i=n||{},o=i.lazy,a=i.number,s=i.trim,c=!o&&"range"!==r,u=o?"change":"range"===r?Nr:"input",l="$event.target.value";s&&(l="$event.target.value.trim()"),a&&(l="_n("+l+")");var f=Or(e,l);c&&(f="if($event.target.composing)return;"+f),gr(t,"value","("+e+")"),wr(t,u,f,null,!0),(s||a)&&wr(t,"blur","$forceUpdate()")}(t,r,i);else if(!F.isReservedTag(o))return kr(t,r,i),!1;return!0},text:function(t,e){e.value&&gr(t,"textContent","_s("+e.value+")")},html:function(t,e){e.value&&gr(t,"innerHTML","_s("+e.value+")")}},isPreTag:function(t){return"pre"===t},isUnaryTag:Qi,mustUseProp:wn,canBeLeftOpenTag:to,isReservedTag:In,getTagNamespace:Dn,staticKeys:function(t){return t.reduce(function(t,e){return t.concat(e.staticKeys||[])},[]).join(",")}(Jo)},Zo=b(function(t){return v("type,tag,attrsList,attrsMap,plain,parent,children,attrs"+(t?","+t:""))});function Yo(t,e){t&&(qo=Zo(e.staticKeys||""),Wo=e.isReservedTag||j,function t(e){e.static=function(t){if(2===t.type)return!1;if(3===t.type)return!0;return!(!t.pre&&(t.hasBindings||t.if||t.for||h(t.tag)||!Wo(t.tag)||function(t){for(;t.parent;){if("template"!==(t=t.parent).tag)return!1;if(t.for)return!0}return!1}(t)||!Object.keys(t).every(qo)))}(e);if(1===e.type){if(!Wo(e.tag)&&"slot"!==e.tag&&null==e.attrsMap["inline-template"])return;for(var n=0,r=e.children.length;n|^function\s*\(/,ta=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,ea={esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,down:40,delete:[8,46]},na={esc:"Escape",tab:"Tab",enter:"Enter",space:" ",up:["Up","ArrowUp"],left:["Left","ArrowLeft"],right:["Right","ArrowRight"],down:["Down","ArrowDown"],delete:["Backspace","Delete"]},ra=function(t){return"if("+t+")return null;"},ia={stop:"$event.stopPropagation();",prevent:"$event.preventDefault();",self:ra("$event.target !== $event.currentTarget"),ctrl:ra("!$event.ctrlKey"),shift:ra("!$event.shiftKey"),alt:ra("!$event.altKey"),meta:ra("!$event.metaKey"),left:ra("'button' in $event && $event.button !== 0"),middle:ra("'button' in $event && $event.button !== 1"),right:ra("'button' in $event && $event.button !== 2")};function oa(t,e,n){var r=e?"nativeOn:{":"on:{";for(var i in t)r+='"'+i+'":'+aa(i,t[i])+",";return r.slice(0,-1)+"}"}function aa(t,e){if(!e)return"function(){}";if(Array.isArray(e))return"["+e.map(function(e){return aa(t,e)}).join(",")+"]";var n=ta.test(e.value),r=Qo.test(e.value);if(e.modifiers){var i="",o="",a=[];for(var s in e.modifiers)if(ia[s])o+=ia[s],ea[s]&&a.push(s);else if("exact"===s){var c=e.modifiers;o+=ra(["ctrl","shift","alt","meta"].filter(function(t){return!c[t]}).map(function(t){return"$event."+t+"Key"}).join("||"))}else a.push(s);return a.length&&(i+=function(t){return"if(!('button' in $event)&&"+t.map(sa).join("&&")+")return null;"}(a)),o&&(i+=o),"function($event){"+i+(n?"return "+e.value+"($event)":r?"return ("+e.value+")($event)":e.value)+"}"}return n||r?e.value:"function($event){"+e.value+"}"}function sa(t){var e=parseInt(t,10);if(e)return"$event.keyCode!=="+e;var n=ea[t],r=na[t];return"_k($event.keyCode,"+JSON.stringify(t)+","+JSON.stringify(n)+",$event.key,"+JSON.stringify(r)+")"}var ca={on:function(t,e){t.wrapListeners=function(t){return"_g("+t+","+e.value+")"}},bind:function(t,e){t.wrapData=function(n){return"_b("+n+",'"+t.tag+"',"+e.value+","+(e.modifiers&&e.modifiers.prop?"true":"false")+(e.modifiers&&e.modifiers.sync?",true":"")+")"}},cloak:E},ua=function(t){this.options=t,this.warn=t.warn||mr,this.transforms=yr(t.modules,"transformCode"),this.dataGenFns=yr(t.modules,"genData"),this.directives=S(S({},ca),t.directives);var e=t.isReservedTag||j;this.maybeComponent=function(t){return!e(t.tag)},this.onceId=0,this.staticRenderFns=[]};function la(t,e){var n=new ua(e);return{render:"with(this){return "+(t?fa(t,n):'_c("div")')+"}",staticRenderFns:n.staticRenderFns}}function fa(t,e){if(t.staticRoot&&!t.staticProcessed)return pa(t,e);if(t.once&&!t.onceProcessed)return da(t,e);if(t.for&&!t.forProcessed)return function(t,e,n,r){var i=t.for,o=t.alias,a=t.iterator1?","+t.iterator1:"",s=t.iterator2?","+t.iterator2:"";0;return t.forProcessed=!0,(r||"_l")+"(("+i+"),function("+o+a+s+"){return "+(n||fa)(t,e)+"})"}(t,e);if(t.if&&!t.ifProcessed)return va(t,e);if("template"!==t.tag||t.slotTarget){if("slot"===t.tag)return function(t,e){var n=t.slotName||'"default"',r=ya(t,e),i="_t("+n+(r?","+r:""),o=t.attrs&&"{"+t.attrs.map(function(t){return w(t.name)+":"+t.value}).join(",")+"}",a=t.attrsMap["v-bind"];!o&&!a||r||(i+=",null");o&&(i+=","+o);a&&(i+=(o?"":",null")+","+a);return i+")"}(t,e);var n;if(t.component)n=function(t,e,n){var r=e.inlineTemplate?null:ya(e,n,!0);return"_c("+t+","+ha(e,n)+(r?","+r:"")+")"}(t.component,t,e);else{var r=t.plain?void 0:ha(t,e),i=t.inlineTemplate?null:ya(t,e,!0);n="_c('"+t.tag+"'"+(r?","+r:"")+(i?","+i:"")+")"}for(var o=0;o':'
',xa.innerHTML.indexOf(" ")>0}var Aa=!!K&&Oa(!1),Sa=!!K&&Oa(!0),Ta=b(function(t){var e=Hn(t);return e&&e.innerHTML}),Ea=pn.prototype.$mount;pn.prototype.$mount=function(t,e){if((t=t&&Hn(t))===document.body||t===document.documentElement)return this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&(r=Ta(r));else{if(!r.nodeType)return this;r=r.innerHTML}else t&&(r=function(t){if(t.outerHTML)return t.outerHTML;var e=document.createElement("div");return e.appendChild(t.cloneNode(!0)),e.innerHTML}(t));if(r){0;var i=ka(r,{shouldDecodeNewlines:Aa,shouldDecodeNewlinesForHref:Sa,delimiters:n.delimiters,comments:n.comments},this),o=i.render,a=i.staticRenderFns;n.render=o,n.staticRenderFns=a}}return Ea.call(this,t,e)},pn.compile=ka,e.a=pn}).call(e,n("DuR2"))},DuR2:function(t,e){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(n=window)}t.exports=n},NYxO:function(t,e,n){"use strict"; 8 | /** 9 | * vuex v3.0.1 10 | * (c) 2017 Evan You 11 | * @license MIT 12 | */var r=function(t){if(Number(t.version.split(".")[0])>=2)t.mixin({beforeCreate:n});else{var e=t.prototype._init;t.prototype._init=function(t){void 0===t&&(t={}),t.init=t.init?[n].concat(t.init):n,e.call(this,t)}}function n(){var t=this.$options;t.store?this.$store="function"==typeof t.store?t.store():t.store:t.parent&&t.parent.$store&&(this.$store=t.parent.$store)}},i="undefined"!=typeof window&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function o(t,e){Object.keys(t).forEach(function(n){return e(t[n],n)})}var a=function(t,e){this.runtime=e,this._children=Object.create(null),this._rawModule=t;var n=t.state;this.state=("function"==typeof n?n():n)||{}},s={namespaced:{configurable:!0}};s.namespaced.get=function(){return!!this._rawModule.namespaced},a.prototype.addChild=function(t,e){this._children[t]=e},a.prototype.removeChild=function(t){delete this._children[t]},a.prototype.getChild=function(t){return this._children[t]},a.prototype.update=function(t){this._rawModule.namespaced=t.namespaced,t.actions&&(this._rawModule.actions=t.actions),t.mutations&&(this._rawModule.mutations=t.mutations),t.getters&&(this._rawModule.getters=t.getters)},a.prototype.forEachChild=function(t){o(this._children,t)},a.prototype.forEachGetter=function(t){this._rawModule.getters&&o(this._rawModule.getters,t)},a.prototype.forEachAction=function(t){this._rawModule.actions&&o(this._rawModule.actions,t)},a.prototype.forEachMutation=function(t){this._rawModule.mutations&&o(this._rawModule.mutations,t)},Object.defineProperties(a.prototype,s);var c=function(t){this.register([],t,!1)};c.prototype.get=function(t){return t.reduce(function(t,e){return t.getChild(e)},this.root)},c.prototype.getNamespace=function(t){var e=this.root;return t.reduce(function(t,n){return t+((e=e.getChild(n)).namespaced?n+"/":"")},"")},c.prototype.update=function(t){!function t(e,n,r){0;n.update(r);if(r.modules)for(var i in r.modules){if(!n.getChild(i))return void 0;t(e.concat(i),n.getChild(i),r.modules[i])}}([],this.root,t)},c.prototype.register=function(t,e,n){var r=this;void 0===n&&(n=!0);var i=new a(e,n);0===t.length?this.root=i:this.get(t.slice(0,-1)).addChild(t[t.length-1],i);e.modules&&o(e.modules,function(e,i){r.register(t.concat(i),e,n)})},c.prototype.unregister=function(t){var e=this.get(t.slice(0,-1)),n=t[t.length-1];e.getChild(n).runtime&&e.removeChild(n)};var u;var l=function(t){var e=this;void 0===t&&(t={}),!u&&"undefined"!=typeof window&&window.Vue&&g(window.Vue);var n=t.plugins;void 0===n&&(n=[]);var r=t.strict;void 0===r&&(r=!1);var o=t.state;void 0===o&&(o={}),"function"==typeof o&&(o=o()||{}),this._committing=!1,this._actions=Object.create(null),this._actionSubscribers=[],this._mutations=Object.create(null),this._wrappedGetters=Object.create(null),this._modules=new c(t),this._modulesNamespaceMap=Object.create(null),this._subscribers=[],this._watcherVM=new u;var a=this,s=this.dispatch,l=this.commit;this.dispatch=function(t,e){return s.call(a,t,e)},this.commit=function(t,e,n){return l.call(a,t,e,n)},this.strict=r,h(this,o,[],this._modules.root),v(this,o),n.forEach(function(t){return t(e)}),u.config.devtools&&function(t){i&&(t._devtoolHook=i,i.emit("vuex:init",t),i.on("vuex:travel-to-state",function(e){t.replaceState(e)}),t.subscribe(function(t,e){i.emit("vuex:mutation",t,e)}))}(this)},f={state:{configurable:!0}};function p(t,e){return e.indexOf(t)<0&&e.push(t),function(){var n=e.indexOf(t);n>-1&&e.splice(n,1)}}function d(t,e){t._actions=Object.create(null),t._mutations=Object.create(null),t._wrappedGetters=Object.create(null),t._modulesNamespaceMap=Object.create(null);var n=t.state;h(t,n,[],t._modules.root,!0),v(t,n,e)}function v(t,e,n){var r=t._vm;t.getters={};var i={};o(t._wrappedGetters,function(e,n){i[n]=function(){return e(t)},Object.defineProperty(t.getters,n,{get:function(){return t._vm[n]},enumerable:!0})});var a=u.config.silent;u.config.silent=!0,t._vm=new u({data:{$$state:e},computed:i}),u.config.silent=a,t.strict&&function(t){t._vm.$watch(function(){return this._data.$$state},function(){0},{deep:!0,sync:!0})}(t),r&&(n&&t._withCommit(function(){r._data.$$state=null}),u.nextTick(function(){return r.$destroy()}))}function h(t,e,n,r,i){var o=!n.length,a=t._modules.getNamespace(n);if(r.namespaced&&(t._modulesNamespaceMap[a]=r),!o&&!i){var s=m(e,n.slice(0,-1)),c=n[n.length-1];t._withCommit(function(){u.set(s,c,r.state)})}var l=r.context=function(t,e,n){var r=""===e,i={dispatch:r?t.dispatch:function(n,r,i){var o=y(n,r,i),a=o.payload,s=o.options,c=o.type;return s&&s.root||(c=e+c),t.dispatch(c,a)},commit:r?t.commit:function(n,r,i){var o=y(n,r,i),a=o.payload,s=o.options,c=o.type;s&&s.root||(c=e+c),t.commit(c,a,s)}};return Object.defineProperties(i,{getters:{get:r?function(){return t.getters}:function(){return function(t,e){var n={},r=e.length;return Object.keys(t.getters).forEach(function(i){if(i.slice(0,r)===e){var o=i.slice(r);Object.defineProperty(n,o,{get:function(){return t.getters[i]},enumerable:!0})}}),n}(t,e)}},state:{get:function(){return m(t.state,n)}}}),i}(t,a,n);r.forEachMutation(function(e,n){!function(t,e,n,r){(t._mutations[e]||(t._mutations[e]=[])).push(function(e){n.call(t,r.state,e)})}(t,a+n,e,l)}),r.forEachAction(function(e,n){var r=e.root?n:a+n,i=e.handler||e;!function(t,e,n,r){(t._actions[e]||(t._actions[e]=[])).push(function(e,i){var o,a=n.call(t,{dispatch:r.dispatch,commit:r.commit,getters:r.getters,state:r.state,rootGetters:t.getters,rootState:t.state},e,i);return(o=a)&&"function"==typeof o.then||(a=Promise.resolve(a)),t._devtoolHook?a.catch(function(e){throw t._devtoolHook.emit("vuex:error",e),e}):a})}(t,r,i,l)}),r.forEachGetter(function(e,n){!function(t,e,n,r){if(t._wrappedGetters[e])return void 0;t._wrappedGetters[e]=function(t){return n(r.state,r.getters,t.state,t.getters)}}(t,a+n,e,l)}),r.forEachChild(function(r,o){h(t,e,n.concat(o),r,i)})}function m(t,e){return e.length?e.reduce(function(t,e){return t[e]},t):t}function y(t,e,n){var r;return null!==(r=t)&&"object"==typeof r&&t.type&&(n=e,e=t,t=t.type),{type:t,payload:e,options:n}}function g(t){u&&t===u||r(u=t)}f.state.get=function(){return this._vm._data.$$state},f.state.set=function(t){0},l.prototype.commit=function(t,e,n){var r=this,i=y(t,e,n),o=i.type,a=i.payload,s=(i.options,{type:o,payload:a}),c=this._mutations[o];c&&(this._withCommit(function(){c.forEach(function(t){t(a)})}),this._subscribers.forEach(function(t){return t(s,r.state)}))},l.prototype.dispatch=function(t,e){var n=this,r=y(t,e),i=r.type,o=r.payload,a={type:i,payload:o},s=this._actions[i];if(s)return this._actionSubscribers.forEach(function(t){return t(a,n.state)}),s.length>1?Promise.all(s.map(function(t){return t(o)})):s[0](o)},l.prototype.subscribe=function(t){return p(t,this._subscribers)},l.prototype.subscribeAction=function(t){return p(t,this._actionSubscribers)},l.prototype.watch=function(t,e,n){var r=this;return this._watcherVM.$watch(function(){return t(r.state,r.getters)},e,n)},l.prototype.replaceState=function(t){var e=this;this._withCommit(function(){e._vm._data.$$state=t})},l.prototype.registerModule=function(t,e,n){void 0===n&&(n={}),"string"==typeof t&&(t=[t]),this._modules.register(t,e),h(this,this.state,t,this._modules.get(t),n.preserveState),v(this,this.state)},l.prototype.unregisterModule=function(t){var e=this;"string"==typeof t&&(t=[t]),this._modules.unregister(t),this._withCommit(function(){var n=m(e.state,t.slice(0,-1));u.delete(n,t[t.length-1])}),d(this)},l.prototype.hotUpdate=function(t){this._modules.update(t),d(this,!0)},l.prototype._withCommit=function(t){var e=this._committing;this._committing=!0,t(),this._committing=e},Object.defineProperties(l.prototype,f);var _=x(function(t,e){var n={};return C(e).forEach(function(e){var r=e.key,i=e.val;n[r]=function(){var e=this.$store.state,n=this.$store.getters;if(t){var r=k(this.$store,"mapState",t);if(!r)return;e=r.context.state,n=r.context.getters}return"function"==typeof i?i.call(this,e,n):e[i]},n[r].vuex=!0}),n}),b=x(function(t,e){var n={};return C(e).forEach(function(e){var r=e.key,i=e.val;n[r]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var r=this.$store.commit;if(t){var o=k(this.$store,"mapMutations",t);if(!o)return;r=o.context.commit}return"function"==typeof i?i.apply(this,[r].concat(e)):r.apply(this.$store,[i].concat(e))}}),n}),$=x(function(t,e){var n={};return C(e).forEach(function(e){var r=e.key,i=e.val;i=t+i,n[r]=function(){if(!t||k(this.$store,"mapGetters",t))return this.$store.getters[i]},n[r].vuex=!0}),n}),w=x(function(t,e){var n={};return C(e).forEach(function(e){var r=e.key,i=e.val;n[r]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var r=this.$store.dispatch;if(t){var o=k(this.$store,"mapActions",t);if(!o)return;r=o.context.dispatch}return"function"==typeof i?i.apply(this,[r].concat(e)):r.apply(this.$store,[i].concat(e))}}),n});function C(t){return Array.isArray(t)?t.map(function(t){return{key:t,val:t}}):Object.keys(t).map(function(e){return{key:e,val:t[e]}})}function x(t){return function(e,n){return"string"!=typeof e?(n=e,e=""):"/"!==e.charAt(e.length-1)&&(e+="/"),t(e,n)}}function k(t,e,n){return t._modulesNamespaceMap[n]}var O={Store:l,install:g,version:"3.0.1",mapState:_,mapMutations:b,mapGetters:$,mapActions:w,createNamespacedHelpers:function(t){return{mapState:_.bind(null,t),mapGetters:$.bind(null,t),mapMutations:b.bind(null,t),mapActions:w.bind(null,t)}}};e.a=O},"VU/8":function(t,e){t.exports=function(t,e,n,r,i,o){var a,s=t=t||{},c=typeof t.default;"object"!==c&&"function"!==c||(a=t,s=t.default);var u,l="function"==typeof s?s.options:s;if(e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0),n&&(l.functional=!0),i&&(l._scopeId=i),o?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},l._ssrRegister=u):r&&(u=r),u){var f=l.functional,p=f?l.render:l.beforeCreate;f?(l._injectStyles=u,l.render=function(t,e){return u.call(e),p(t,e)}):l.beforeCreate=p?[].concat(p,u):[u]}return{esModule:a,exports:s,options:l}}},eOgT:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t){this.store=t}return t.prototype.connect=function(t){var e=this,n=void 0===t?{}:t,r=n.mapStateToProps,i=void 0===r?{}:r,o=n.mapGettersToProps,a=void 0===o?{}:o,s=n.mapDispatchToProps,c=void 0===s?{}:s,u=n.mapCommitToProps,l=void 0===u?{}:u;return function(t){return{functional:!0,render:function(n,r){return n(t,Object.assign(r.data,{props:Object.assign({},r.data.props,e.dataToProps(i,"state"),e.dataToProps(a,"getters"),e.functionToProps(c,"dispatch"),e.functionToProps(l,"commit"))}),r.children)}}}},t.prototype.dataToProps=function(t,e){var n=this;return void 0===t&&(t={}),Object.keys(t).reduce(function(r,i){var o,a=t[i];switch(typeof a){case"function":o=a;break;case"string":o=function(t){return t[a]}}return r[i]=o(n.store[e]),r},{})},t.prototype.functionToProps=function(t,e){var n=this;return void 0===t&&(t={}),Object.keys(t).reduce(function(r,i){var o=t[i];return r[i]=function(){for(var t=[],r=0;r",store:_})},O1RA:function(t,n){}},["NHnr"]); 2 | //# sourceMappingURL=app.3be6ac6ae84c79d1dbbd.js.map -------------------------------------------------------------------------------- /dist/vue-vuex-container-component/dist/static/js/app.3be6ac6ae84c79d1dbbd.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/components/CommentList.vue?cbcf","webpack:///./src/components/CommentList.vue","webpack:///src/components/CommentList.vue","webpack:///src/components/CommentListNew.vue","webpack:///./src/components/CommentListNew.vue?d10e","webpack:///./src/components/CommentListNew.vue","webpack:///src/containers/CommentListContainer.vue","webpack:///./src/containers/CommentListContainer.vue?fda4","webpack:///./src/containers/CommentListContainer.vue","webpack:///./src/store/index.js","webpack:///src/containers/ConnectCommentListContainer.vue","webpack:///src/App.vue","webpack:///./src/containers/ConnectCommentListContainer.vue","webpack:///./src/App.vue?7522","webpack:///./src/App.vue","webpack:///./src/main.js"],"names":["components_CommentList","render","_vm","this","_h","$createElement","_c","_self","_l","comment","key","id","_v","_s","body","author","staticRenderFns","src_components_CommentList","__webpack_require__","normalizeComponent","comments","CommentListNew","Array","every","Function","String","fetch","components_CommentListNew","type","src_components_CommentListNew","CommentListNew_normalizeComponent","CommentListContainer","CommentList","containers_CommentListContainer","attrs","fetchComments","src_containers_CommentListContainer","CommentListContainer_normalizeComponent","vue_esm","use","vuex_esm","store","Store","state","mutations","setComments","actions","_ref","commit","setTimeout","src_store","ConnectCommentListContainer","lib_default","a","connect","App","ConnectCommentListContainer_normalizeComponent","selectortype_template_index_0_src_App","staticClass","src_App","App_normalizeComponent","ssrContext","config","productionTip","el","components","template"],"mappings":"qHAGAA,GADiBC,OAFjB,WAA0B,IAAAC,EAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,KAAAJ,EAAAM,GAAAN,EAAA,kBAAAO,GAAuD,OAAAH,EAAA,MAAgBI,IAAAD,EAAAE,KAAeT,EAAAU,GAAA,SAAAV,EAAAW,GAAAJ,EAAAK,MAAA,IAAAZ,EAAAW,GAAAJ,EAAAM,QAAA,cAE9JC,oBCqBjBC,EAvBAC,EAAA,OAcAC,OCAA,qEAGAC,mDAKA,mBDNApB,GATA,EAEA,KAEA,KAEA,MAUA,QEXAqB,QAGA,uCAGAC,kEAKAC,MAAA,SAAAd,0CAEAA,kBAIAe,0CAOAC,iCAEAC,UCnCAC,GADiB1B,OAFjB,WAA0B,IAAAC,EAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,MAAAJ,EAAAU,GAAA,OAAAV,EAAAW,GAAAX,EAAA0B,MAAA,WAAA1B,EAAAM,GAAAN,EAAA,kBAAAO,GAAkG,OAAAH,EAAA,MAAgBI,IAAAD,EAAAE,KAAeT,EAAAU,GAAA,SAAAV,EAAAW,GAAAJ,EAAAK,MAAA,IAAAZ,EAAAW,GAAAJ,EAAAM,QAAA,aAA4E,IAErRC,oBCqBjBa,EAvBAX,EAAA,OAcAY,CACAT,EACAM,GATA,EAEA,KAEA,KAEA,MAUA,QCbAI,QAGA,mCAIAC,YAAAH,0DAGAT,yEAMA,oBCvBAa,GADiBhC,OAFjB,WAA0B,IAAaG,EAAbD,KAAaE,eAAkD,OAA/DF,KAAuCI,MAAAD,IAAAF,GAAwB,eAAyB8B,OAAOR,MAA/FvB,KAA+FgC,cAAAf,SAA/FjB,KAA+FiB,aAExGJ,oBCqBjBoB,EAvBAlB,EAAA,OAcAmB,CACAN,EACAE,GATA,EAEA,KAEA,KAEA,MAUA,yCCnBAK,EAAA,EAAIC,IAAIC,EAAA,GAER,IAAMC,EAAQ,IAAID,EAAA,EAAKE,OACrBC,OACEvB,aAGFwB,WACEC,YADS,SACIF,EAAOvB,GAClBuB,EAAMvB,SAAWA,IAIrB0B,SACEX,cADO,SAAAY,GACoB,IAAVC,EAAUD,EAAVC,OACfC,WAAW,WACTD,EAAO,gBAEHlC,KAAM,OACNC,OAAQ,KACRJ,GAAI,OAGJG,KAAM,OACNC,OAAQ,KACRJ,GAAI,cAUhBuC,EAAA,ECnCAC,EDiCyB,IAAIC,EAAAC,EAAcZ,GCjC3Ca,wDAIAlC,mCAGA,kBAPA,CACAS,GCeA0B,eAGAvB,YAAAf,EACAc,qBAAAK,EAEAe,4BC1BAjC,EAAA,OAcAsC,CACAL,EAVA,MAEA,EAEA,KAEA,KAEA,MAUA,UCpBAM,GADiBxD,OAFjB,WAA0B,IAAAC,EAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,OAAiBoD,YAAA,YAAsBpD,EAAA,MAAAJ,EAAAU,GAAA,iBAAAV,EAAAU,GAAA,KAAAN,EAAA,MAAAJ,EAAAU,GAAA,YAAAV,EAAAU,GAAA,KAAAN,EAAA,eAAyG4B,OAAON,KAAA,QAAa1B,EAAAU,GAAA,KAAAN,EAAA,MAAAJ,EAAAU,GAAA,sBAAAV,EAAAU,GAAA,KAAAN,EAAA,wBAA2F4B,OAAON,KAAA,QAAa1B,EAAAU,GAAA,KAAAN,EAAA,MAAAJ,EAAAU,GAAA,sCAAAV,EAAAU,GAAA,KAAAN,EAAA,+BAAkH4B,OAAON,KAAA,SAAa,IAEjeZ,oBCCjB,IAuBA2C,EAvBAzC,EAAA,OAcA0C,CACAL,EACAE,GATA,EAVA,SAAAI,GACA3C,EAAA,SAaA,KAEA,MAUA,QCpBAoB,EAAA,EAAIwB,OAAOC,eAAgB,EAG3B,IAAIzB,EAAA,GACF0B,GAAI,OACJC,YAAcV,IAAAI,GACdO,SAAU,SACVzB,MAAAS","file":"vue-vuex-container-component/dist/static/js/app.3be6ac6ae84c79d1dbbd.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',_vm._l((_vm.comments),function(comment){return _c('li',{key:comment.id},[_vm._v(\"\\n \"+_vm._s(comment.body)+\"—\"+_vm._s(comment.author)+\"\\n \")])}))}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-658c3129\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/CommentList.vue\n// module id = null\n// module chunks = ","var normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentList.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentList.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-658c3129\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./CommentList.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/CommentList.vue\n// module id = null\n// module chunks = ","\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/components/CommentList.vue","\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/components/CommentListNew.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',[_vm._v(\"\\n \"+_vm._s(_vm.type)+\" 评论\\n \"),_vm._l((_vm.comments),function(comment){return _c('li',{key:comment.id},[_vm._v(\"\\n \"+_vm._s(comment.body)+\"—\"+_vm._s(comment.author)+\"\\n \")])})],2)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-539b6896\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/CommentListNew.vue\n// module id = null\n// module chunks = ","var normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentListNew.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentListNew.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-539b6896\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./CommentListNew.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/CommentListNew.vue\n// module id = null\n// module chunks = ","\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/containers/CommentListContainer.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('CommentList',{attrs:{\"fetch\":_vm.fetchComments,\"comments\":_vm.comments}})}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-69b51114\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/containers/CommentListContainer.vue\n// module id = null\n// module chunks = ","var normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentListContainer.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CommentListContainer.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-69b51114\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./CommentListContainer.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/containers/CommentListContainer.vue\n// module id = null\n// module chunks = ","import Vue from 'vue'\nimport Vuex from 'vuex'\nimport VuexConnector from '@xunlei/vuex-connector'\n\nVue.use(Vuex)\n\nconst store = new Vuex.Store({\n state: {\n comments: []\n },\n\n mutations: {\n setComments (state, comments) {\n state.comments = comments\n }\n },\n\n actions: {\n fetchComments ({ commit }) {\n setTimeout(() => {\n commit('setComments', [\n {\n body: '霸气侧漏',\n author: '雷叔',\n id: 1123\n },\n {\n body: '机智如我',\n author: '蕾妹',\n id: 1124\n }\n ])\n })\n }\n }\n})\n\nexport const connector = new VuexConnector(store)\n\nexport default store\n\n\n\n// WEBPACK FOOTER //\n// ./src/store/index.js","\n\n\n\n// WEBPACK FOOTER //\n// src/containers/ConnectCommentListContainer.vue","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/App.vue","var normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./ConnectCommentListContainer.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./ConnectCommentListContainer.vue\"\n/* template */\nvar __vue_template__ = null\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/containers/ConnectCommentListContainer.vue\n// module id = null\n// module chunks = ","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"wrapper\"},[_c('h1',[_vm._v(\"容器组件-展示组件模式\")]),_vm._v(\" \"),_c('h2',[_vm._v(\"没有容器组件\")]),_vm._v(\" \"),_c('CommentList',{attrs:{\"type\":\"热门\"}}),_vm._v(\" \"),_c('h2',[_vm._v(\"手动实现容器组件与store连接\")]),_vm._v(\" \"),_c('CommentListContainer',{attrs:{\"type\":\"热门\"}}),_vm._v(\" \"),_c('h2',[_vm._v(\"通过 @xunlei/vuex-connector 实现容器组件\")]),_vm._v(\" \"),_c('ConnectCommentListContainer',{attrs:{\"type\":\"热门\"}})],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-4f8776f0\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-4f8776f0\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n}\nvar normalizeComponent = require(\"!../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\nimport __vue_script__ from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\n/* template */\nimport __vue_template__ from \"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-4f8776f0\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = null\n// module chunks = ","// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue'\nimport App from './App'\nimport store from './store'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vue({\n el: '#app',\n components: { App },\n template: '',\n store\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/vue-vuex-container-component/dist/static/js/manifest.af5ec52920e0722bdbaf.js: -------------------------------------------------------------------------------- 1 | !function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a 2 | 3 | 4 | 5 | 6 | vue-vuex-container-component 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vuex-container-component", 3 | "version": "1.0.0", 4 | "description": "Vue Vuex 容器-展示组件模式demo", 5 | "author": "赵兵 ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js" 12 | }, 13 | "dependencies": { 14 | "@xunlei/vuex-connector": "^0.1.3", 15 | "vue": "^2.5.2", 16 | "vuex": "^3.0.1" 17 | }, 18 | "devDependencies": { 19 | "autoprefixer": "^7.1.2", 20 | "babel-core": "^6.22.1", 21 | "babel-eslint": "^8.2.1", 22 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 23 | "babel-loader": "^7.1.1", 24 | "babel-plugin-syntax-jsx": "^6.18.0", 25 | "babel-plugin-transform-runtime": "^6.22.0", 26 | "babel-plugin-transform-vue-jsx": "^3.5.0", 27 | "babel-preset-env": "^1.3.2", 28 | "babel-preset-stage-2": "^6.22.0", 29 | "chalk": "^2.0.1", 30 | "copy-webpack-plugin": "^4.0.1", 31 | "css-loader": "^0.28.0", 32 | "eslint": "^4.15.0", 33 | "eslint-config-standard": "^10.2.1", 34 | "eslint-friendly-formatter": "^3.0.0", 35 | "eslint-loader": "^1.7.1", 36 | "eslint-plugin-import": "^2.7.0", 37 | "eslint-plugin-node": "^5.2.0", 38 | "eslint-plugin-promise": "^3.4.0", 39 | "eslint-plugin-standard": "^3.0.1", 40 | "eslint-plugin-vue": "^4.0.0", 41 | "extract-text-webpack-plugin": "^3.0.0", 42 | "file-loader": "^1.1.4", 43 | "friendly-errors-webpack-plugin": "^1.6.1", 44 | "html-webpack-plugin": "^2.30.1", 45 | "node-notifier": "^5.1.2", 46 | "optimize-css-assets-webpack-plugin": "^3.2.0", 47 | "ora": "^1.2.0", 48 | "portfinder": "^1.0.13", 49 | "postcss-import": "^11.0.0", 50 | "postcss-loader": "^2.0.8", 51 | "postcss-url": "^7.2.1", 52 | "rimraf": "^2.6.0", 53 | "semver": "^5.3.0", 54 | "shelljs": "^0.7.6", 55 | "uglifyjs-webpack-plugin": "^1.1.1", 56 | "url-loader": "^0.5.8", 57 | "vue-loader": "^13.3.0", 58 | "vue-style-loader": "^3.0.1", 59 | "vue-template-compiler": "^2.5.2", 60 | "webpack": "^3.6.0", 61 | "webpack-bundle-analyzer": "^2.9.0", 62 | "webpack-dev-server": "^2.9.1", 63 | "webpack-merge": "^4.1.0" 64 | }, 65 | "engines": { 66 | "node": ">= 6.0.0", 67 | "npm": ">= 3.0.0" 68 | }, 69 | "browserslist": [ 70 | "> 1%", 71 | "last 2 versions", 72 | "not ie <= 8" 73 | ] 74 | } 75 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 | 30 | 60 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-vuex-container-component/823dd0091f63a95ada1b7c0d67d9693974908736/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/CommentList.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 26 | -------------------------------------------------------------------------------- /src/components/CommentListNew.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 42 | -------------------------------------------------------------------------------- /src/containers/CommentListContainer.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 31 | -------------------------------------------------------------------------------- /src/containers/ConnectCommentListContainer.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import store from './store' 6 | 7 | Vue.config.productionTip = false 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | components: { App }, 13 | template: '', 14 | store 15 | }) 16 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import VuexConnector from '@xunlei/vuex-connector' 4 | 5 | Vue.use(Vuex) 6 | 7 | const store = new Vuex.Store({ 8 | state: { 9 | comments: [] 10 | }, 11 | 12 | mutations: { 13 | setComments (state, comments) { 14 | state.comments = comments 15 | } 16 | }, 17 | 18 | actions: { 19 | fetchComments ({ commit }) { 20 | setTimeout(() => { 21 | commit('setComments', [ 22 | { 23 | body: '霸气侧漏', 24 | author: '雷叔', 25 | id: 1123 26 | }, 27 | { 28 | body: '机智如我', 29 | author: '蕾妹', 30 | id: 1124 31 | } 32 | ]) 33 | }) 34 | } 35 | } 36 | }) 37 | 38 | export const connector = new VuexConnector(store) 39 | 40 | export default store 41 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-vuex-container-component/823dd0091f63a95ada1b7c0d67d9693974908736/static/.gitkeep --------------------------------------------------------------------------------