├── static └── .gitkeep ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .gitignore ├── src ├── assets │ └── logo.png ├── store │ ├── mutation-types.js │ ├── index.js │ ├── actions.js │ └── mutations.js ├── components │ ├── 404.vue │ ├── Home.vue │ ├── Sidebar.vue │ ├── Hello.vue │ ├── LogTime.vue │ └── TimeEntries.vue ├── App.vue └── main.js ├── .babelrc ├── .editorconfig ├── index.html ├── .idea └── codeStyleSettings.xml ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | .idea/ 6 | 7 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MeCKodo/vue-tutorial/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | // 增加总时间或者减少总时间 2 | export const ADD_TOTAL_TIME = 'ADD_TOTAL_TIME'; 3 | export const DEC_TOTAL_TIME = 'DEC_TOTAL_TIME'; 4 | 5 | // 新增和删除一条计划 6 | export const SAVE_PLAN = 'SAVE_PLAN'; 7 | export const DELETE_PLAN = 'DELETE_PLAN'; 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-tutorial 6 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/404.vue: -------------------------------------------------------------------------------- 1 | 4 | 7 | 20 | -------------------------------------------------------------------------------- /.idea/codeStyleSettings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import mutations from './mutations' 4 | import actions from './actions' 5 | 6 | Vue.use(Vuex); 7 | 8 | const state = { 9 | totalTime: 0, 10 | list: [] 11 | }; 12 | 13 | export default new Vuex.Store({ 14 | state, 15 | mutations, 16 | actions 17 | }) 18 | 19 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutation-types' 2 | 3 | export default { 4 | addTotalTime({ commit }, time) { 5 | commit(types.ADD_TOTAL_TIME, time) 6 | }, 7 | decTotalTime({ commit }, time) { 8 | commit(types.DEC_TOTAL_TIME, time) 9 | }, 10 | savePlan({ commit }, plan) { 11 | commit(types.SAVE_PLAN, plan); 12 | }, 13 | deletePlan({ commit }, plan) { 14 | commit(types.DELETE_PLAN, plan) 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 11 | 14 | 27 | -------------------------------------------------------------------------------- /src/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 13 | 23 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutation-types' 2 | 3 | export default { 4 | [types.ADD_TOTAL_TIME] (state, time) { 5 | state.totalTime = state.totalTime + ~~time 6 | }, 7 | [types.DEC_TOTAL_TIME] (state, time) { 8 | state.totalTime = state.totalTime - time 9 | }, 10 | [types.SAVE_PLAN] (state, plan) { 11 | // 设置默认值，未来我们可以做登入直接读取昵称和头像 12 | const avatar = 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256'; 13 | 14 | state.list.push( 15 | Object.assign({ name: '二哲', avatar: avatar }, plan) 16 | ) 17 | }, 18 | [types.DELETE_PLAN] (state, idx) { 19 | state.list.splice(idx, 1); 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 35 | 36 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import store from './store' 4 | import App from './App' 5 | import Home from './components/Home' 6 | import TimeEntries from './components/TimeEntries.vue' 7 | import LogTime from './components/LogTime.vue' 8 | import NotFound from './components/404' 9 | import VueResource from 'vue-resource' 10 | import 'bootstrap/dist/css/bootstrap.css' 11 | 12 | Vue.use(VueRouter) 13 | Vue.use(VueResource) 14 | 15 | const routes = [{ 16 | path : '/', 17 | component : Home 18 | },{ 19 | path : '/home', 20 | component : Home 21 | },{ 22 | path : '/time-entries', 23 | component : TimeEntries, 24 | children : [{ 25 | path : 'log-time', 26 | component : LogTime, 27 | }] 28 | },{ 29 | path : '*', 30 | component : NotFound 31 | }]; 32 | 33 | const router = new VueRouter({ 34 | routes 35 | }); 36 | 37 | /* eslint-disable no-new */ 38 | // 这灵活得亮瞎了 39 | /*new Vue({ 40 | el: '#app', 41 | template: '', 42 | router, 43 | components: { App } 44 | }); 45 | 46 | new Vue(Vue.util.extend({ 47 | router 48 | }, App)).$mount('#app'); 49 | 50 | new Vue({ 51 | el:'#app', 52 | router, 53 | render:h => h(App) 54 | });*/ 55 | var app = new Vue({ 56 | el: '#app', 57 | router, 58 | store, 59 | ...App, 60 | }); 61 | -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 33 | 34 | 35 | 54 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tutorial", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "kodo <524580860@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "dependencies": { 12 | "bootstrap": "^3.3.7", 13 | "vue": "^2.1.0", 14 | "vue-resource": "^1.0.3", 15 | "vue-router": "^2.0.3", 16 | "vuex": "^2.0.0" 17 | }, 18 | "devDependencies": { 19 | "autoprefixer": "^6.4.0", 20 | "babel-core": "^6.0.0", 21 | "babel-loader": "^6.0.0", 22 | "babel-plugin-transform-runtime": "^6.0.0", 23 | "babel-preset-es2015": "^6.0.0", 24 | "babel-preset-stage-2": "^6.0.0", 25 | "babel-register": "^6.0.0", 26 | "chalk": "^1.1.3", 27 | "connect-history-api-fallback": "^1.1.0", 28 | "css-loader": "^0.25.0", 29 | "eventsource-polyfill": "^0.9.6", 30 | "express": "^4.13.3", 31 | "extract-text-webpack-plugin": "^1.0.1", 32 | "file-loader": "^0.9.0", 33 | "function-bind": "^1.0.2", 34 | "html-webpack-plugin": "^2.8.1", 35 | "http-proxy-middleware": "^0.17.2", 36 | "json-loader": "^0.5.4", 37 | "semver": "^5.3.0", 38 | "opn": "^4.0.2", 39 | "ora": "^0.3.0", 40 | "shelljs": "^0.7.4", 41 | "url-loader": "^0.5.7", 42 | "vue-loader": "^10.0.0", 43 | "vue-style-loader": "^1.0.0", 44 | "vue-template-compiler": "^2.1.0", 45 | "webpack": "^1.13.2", 46 | "webpack-dev-middleware": "^1.8.3", 47 | "webpack-hot-middleware": "^2.12.2", 48 | "webpack-merge": "^0.14.1" 49 | }, 50 | "engines": { 51 | "node": ">= 4.0.0", 52 | "npm": ">= 3.0.0" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/components/LogTime.vue: -------------------------------------------------------------------------------- 1 | 39 | 42 | 69 | -------------------------------------------------------------------------------- /src/components/TimeEntries.vue: -------------------------------------------------------------------------------- 1 | 63 | 81 | 100 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 3 | 我们将会选择使用一些vue周边的库 `vue-cli`, `vue-router`,`vue-resource`,`vuex` 4 | 5 | > 1.使用vue-cli创建项目 6 | 7 | > 2.使用vue-router实现单页路由 8 | 9 | > 3.用vuex管理我们的数据流 10 | 11 | > 4.使用vue-resource请求我们的node服务端 12 | 13 | > 5.使用.vue文件进行组件化的开发 14 | 15 | > PS：本文node v6.2.2 npm v3.9.5 vue v2.1.0 vue-router v2.0.3 vuex v2.0.0 16 | 17 | > 若你要看vue1.0构建单页应用最佳实战 请 前往 master 分支 [vue1.0构建单页应用最佳实战](https://github.com/MeCKodo/vue-tutorial/tree/master) 18 | 19 | 最终我们将会构建出一个小demo，不废话，直接上图。 20 | 21 | 22 | ![](http://7xim8z.com1.z0.glb.clouddn.com/vue2spa-1.png) 23 | 24 | 25 | ## 安装 26 | 27 | 1.我们将会使用webpack去为我们的模块打包，预处理，热加载。如果你对webpack不熟悉，它就是可以帮助我们把多个js文件打包为1个入口文件，并且可以达到按需加载。这就意味着，我们不用担心由于使用太多的组件，导致了过多的HTTP请求，这是非常有益于产品体验的。但我们并不只是为了这个而使用webpack，我们需要用webpack去编译.vue文件，如果没有使用一个loader去转换我们.vue文件里的style、js和html，那么浏览器就无法识别。 28 | 29 | 2.模块热加载是webpack的一个非常碉堡的特性，将会为我们的单页应用带来极大的便利。 30 | 通常来说，当我们修改了代码刷新页面，那应用里的所有状态就都没有了。这对于开发一个单页应用来说是非常痛苦的，因为需要重新在跑一遍流程。如果有模块热加载，当你修改了代码，你的代码会直接修改，页面并不会刷新，所以状态也会被保留。 31 | 32 | 3.Vue也为我们提供了CSS预处理，所以我们可以选择在.vue文件里写LESS或者SASS去代替原生CSS。 33 | 34 | 4.我们过去通常需要使用npm下载一堆的依赖，但是现在我们可以选择Vue-cli。这是一个vue生态系统中一个伟大创举。这意味着我们不需要手动构建我们的项目，而它就可以很快地为我们生成。 35 | 36 | 首先，安装vue-cli。(确保你有node和npm) 37 | 38 | `npm i -g vue-cli` 39 | 40 | 然后创建一个webpack项目并且下载依赖 41 | 42 | `vue init webpack vue-tutorial` 43 | 44 | ![](http://7xim8z.com1.z0.glb.clouddn.com/vue2spa-0.png) 45 | 46 | `cd vue-tutorial` 47 | 48 | `npm i` 49 | 50 | 接着使用 `npm run dev` 在热加载中运行我们的应用 51 | 52 | 这一行命令代表着它会去找到`package.json`的`scripts`对象，执行`node bulid/dev-server.js`。在这文件里，配置了Webpack，会让它去编译项目文件，并且运行服务器，我们在`localhost:8080`即可查看我们的应用。 53 | 54 | ![](http://7xim8z.com1.z0.glb.clouddn.com/vue2spa-4.png) 55 | 56 | 这些都准备好后，我们需要为我们的路由、XHR请求、数据管理下载三个库，我们可以从vue的官网中找到他们。另外我们使用`bootstrap`作为我的UI库 57 | 58 | `npm i vue-resource vue-router vuex bootstrap --save` 59 | 60 | ## 初始化（main.js） 61 | 62 | 查看我们的应用文件，我们可以在src目录下找到`App.vue`和`main.js`。`main.js`将会作为我们应用的入口文件而`App.vue`会作为我们应用的初始化组件。先让我们来完善下`main.js` 63 | 64 | ```javascript 65 | // src/main.js 66 | import Vue from 'vue' 67 | import VueRouter from 'vue-router' 68 | import VueResource from 'vue-resource' 69 | 70 | import App from './App' 71 | import Home from './components/Home' 72 | import 'bootstrap/dist/css/bootstrap.css' 73 | 74 | Vue.use(VueRouter) 75 | Vue.use(VueResource) 76 | 77 | const routes = [{ 78 | path : '/', 79 | component : Home 80 | },{ 81 | path : '/home', 82 | component : Home 83 | }]; 84 | 85 | const router = new VueRouter({ 86 | routes 87 | }); 88 | 89 | /* eslint-disable no-new */ 90 | // 实例化我们的Vue 91 | var app = new Vue({ 92 | el: '#app', 93 | router, 94 | ...App, 95 | }); 96 | ``` 97 | 98 | **这有两个与1.0不同的地方** 99 | 100 | > 一、`vue-router`路由的参数由对象统一变为了数组要注意。还有则是实例化vue的`el`参数已经不能设置`html`和`body`了，因为在`vue2`中是会替换我们指定的标签 101 | 102 | > 二、我们必须在实例化vue的时候指定渲染什么组件，以前我们是通过路由来指定如`router.start(App, '#app')`，而在vue2中则不需要了 103 | 104 | 可以发现我们在`main.js`里使用了两个组件`App.vue`和`Home.vue`，稍后让我们具体实现它们的内容。 105 | 106 | 而我们的`index.html`只需要保留`
`即可，我们的Vue在实例化时设置了`el : '#app'` 所以会替换这标签，为我们`App`组件的内容 107 | 108 | ```html 109 | //index.html 110 |
111 | ``` 112 | 113 | 我们的初始化就到这结束了，接下来让我们开始创建组件。 114 | 115 | 116 | ## 创建首页组件 117 | 118 | 首先我们在App.vue里为我们的应用写个顶部导航。 119 | 120 | ```js 121 | // src/App.vue 122 | 123 | 147 | 148 | ``` 149 | 150 | 除了我们的`navbar`以外，我们还需要一个`.container`去放我们其余需要展示的信息。 151 | 并且在这里我们要放一个`router-view`标签，`vue-router`的切换就是通过这个标签开始显现的。 152 | 153 | **在这有个与1.0不同的地方** 154 | 155 | > 以前我们可以直接通过写a标签 然后写v-link属性进行路由跳转，在vue2中改为了写``标签再写对应属性（to）进行跳转 156 | 157 | 158 | 接着，我们需要创建一个`Home.vue`作为我们的首页 159 | 160 | ```js 161 | // src/components/Home.vue 162 | 163 | 173 | ``` 174 | 175 | 不出意外的话，你可以看见如下效果 176 | 177 | ![](http://7xim8z.com1.z0.glb.clouddn.com/vue-tutorial-1.png) 178 | 179 | ## 创建侧边栏组件 180 | 181 | 目前我们首页左侧还有一块空白，我们需要它放下一个侧边栏去统计所有计划的总时间。 182 | 183 | ```js 184 | // src/App.vue 185 | 186 | //... 187 | 188 |
189 |
190 | 191 |
192 |
193 | 194 |
195 |
196 | 197 | //... 198 | ``` 199 | 200 | 201 | ```js 202 | 209 | ``` 210 | 211 | 在`Sidebar.vue`我们需要通过store去获取总时间，我们的总时间是共享的数据 212 | 213 | ``` 214 | // src/components/Sidebar.vue 215 | 227 | 228 | 237 | ``` 238 | 239 | ## 创建计划列表组件 240 | 241 | 然后我们需要去创建我们的时间跟踪列表。 242 | 243 | ```js 244 | 245 | // src/components/TimeEntries.vue 246 | 247 | 323 | ``` 324 | 325 | 关于template的解释，都写在一起了，再看看我们的`script` 326 | 327 | ```js 328 | // src/components/TimeEntries.vue 329 | 330 | 350 | ``` 351 | 352 | 别忘了为我们的组件写上一些需要的样式 353 | ```js 354 | // src/components/TimeEntries.vue 355 | 356 | 375 | ``` 376 | 377 | 既然我们的数据是共享的，所以我们需要把数据存在`store`里 378 | 379 | 我们在src下创建个目录为`store` 380 | 381 | 在`store`下分别创建4个js文件`actions.js`,`index.js`,`mutation-types.js`,`mutations.js` 382 | 383 | 看名字也就知道这4个分别是做啥用的了，建议大家多阅读阅读`vuex`的文档，多姿势多动手实践，慢慢的也就能理解了。 384 | 385 | ```js 386 | // src/store/index.js 387 | import Vue from 'vue' 388 | import Vuex from 'vuex' 389 | 390 | Vue.use(Vuex); 391 | 392 | // 先写个假数据 393 | const state = { 394 | totalTime: 0, 395 | list: [{ 396 | name : '二哲', 397 | avatar : 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256', 398 | date : '2016-12-25', 399 | totalTime : '6', 400 |    comment : '12月25日晚上，陪女朋友一起过圣诞节需要6个小时' 401 | }] 402 | }; 403 | 404 | export default new Vuex.Store({ 405 | state, 406 | }) 407 | ``` 408 | 409 | 由于新增了页面和store 在我们的入口js文件里配置下 410 | ```javascript 411 | // src/main.js 412 | import store from './store' 413 | import TimeEntries from './components/TimeEntries.vue' 414 | //... 415 | 416 | const routes = [{ 417 | path : '/', 418 | component : Home 419 | },{ 420 | path : '/home', 421 | component : Home 422 | },{ 423 | path : '/time-entries', 424 | component : TimeEntries, 425 | }]; 426 | 427 | var app = new Vue({ 428 | el: '#app', 429 | router, 430 | store, 431 | ...App, 432 | }); 433 | 434 | ``` 435 | 436 | 不出意外的话，你可以在`/time-entries` 路由下看见这样的页面 437 | 438 | ![](http://7xim8z.com1.z0.glb.clouddn.com/vue2spa-7.png) 439 | 440 | 通过`vue-Devtools`我们可以发现我们的store已经构造好了并且成功从store获取了数据 441 | 442 | ## 创建任务组件 443 | 444 | 这个比较简单我们直接给出代码 445 | 446 | ```js 447 | // src/components/LogTime.vue 448 | 449 | 487 | 488 | 514 | 515 | ``` 516 | 517 | 这个组件很简单就3个input输入而已，然后就两个按钮，保存我们就把数据push进我们store的列表里 518 | 519 | `LogTime`属于我们`TimeEntries`组件的一个子路由，所以我们依旧需要配置下我们的路由，并且利用webpack让它懒加载，减少我们首屏加载的流量 520 | 521 | ```js 522 | // src/main.js 523 | //... 524 | const routes = [{ 525 | path : '/', 526 | component : Home 527 | },{ 528 | path : '/home', 529 | component : Home 530 | },{ 531 | path : '/time-entries', 532 | component : TimeEntries, 533 | children : [{ 534 | path : 'log-time', 535 | // 懒加载 536 | component : resolve => require(['./components/LogTime.vue'],resolve), 537 | }] 538 | }]; 539 | 540 | //... 541 | ``` 542 | 543 | ## vuex部分 544 | 545 | **在vue2.0中废除了使用事件的方式进行通信，所以在小项目中我们可以使用Event Bus，其余最好都使用vuex，本文我们使用Vuex来实现数据通信** 546 | 547 | 相信你刚刚已经看见了我写了很多`this.$store.dispatch('savePlan', plan)` 类似这样的代码，我们再次统一说明。 548 | 549 | 仔细思考一下，我们需要两个全局数据，一个为所有计划的总时间，一个是计划列表的数组。 550 | 551 | `src/store/index.js` 没啥太多可介绍的，其实就是传入我们的`state`,`mutations`,`actions`来初始化我们的Store。如果有需要的话我们还可能需要创建我们的`getter`在本例中就不用了。 552 | 553 | 接着我们看`mutation-types.js`，既然想很明确了解数据，那就应该有什么样的操作看起，当然这也看个人口味哈 554 | 555 | ```js 556 | // src/store/mutation-types.js 557 | 558 | // 增加总时间或者减少总时间 559 | export const ADD_TOTAL_TIME = 'ADD_TOTAL_TIME'; 560 | export const DEC_TOTAL_TIME = 'DEC_TOTAL_TIME'; 561 | 562 | // 新增和删除一条计划 563 | export const SAVE_PLAN = 'SAVE_PLAN'; 564 | export const DELETE_PLAN = 'DELETE_PLAN'; 565 | 566 | ``` 567 | 568 | ```js 569 | // src/store/mutations.js 570 | import * as types from './mutation-types' 571 | 572 | export default { 573 | // 增加总时间 574 | [types.ADD_TOTAL_TIME] (state, time) { 575 | state.totalTime = state.totalTime + time 576 | }, 577 | // 减少总时间 578 | [types.DEC_TOTAL_TIME] (state, time) { 579 | state.totalTime = state.totalTime - time 580 | }, 581 | // 新增计划 582 | [types.SAVE_PLAN] (state, plan) { 583 | // 设置默认值，未来我们可以做登入直接读取昵称和头像 584 | const avatar = 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256'; 585 | 586 | state.list.push( 587 | Object.assign({ name: '二哲', avatar: avatar }, plan) 588 | ) 589 | }, 590 | // 删除某计划 591 | [types.DELETE_PLAN] (state, idx) { 592 | state.list.splice(idx, 1); 593 | } 594 | }; 595 | 596 | ``` 597 | 最后对应看我们的`actions`就很明白了 598 | 599 | ```js 600 | // src/store/actions.js 601 | 602 | import * as types from './mutation-types' 603 | 604 | export default { 605 | addTotalTime({ commit }, time) { 606 | commit(types.ADD_TOTAL_TIME, time) 607 | }, 608 | decTotalTime({ commit }, time) { 609 | commit(types.DEC_TOTAL_TIME, time) 610 | }, 611 | savePlan({ commit }, plan) { 612 | commit(types.SAVE_PLAN, plan); 613 | }, 614 | deletePlan({ commit }, plan) { 615 | commit(types.DELETE_PLAN, plan) 616 | } 617 | }; 618 | 619 | ``` 620 | 我们的`actions`其实就是去触发事件和传入参数啦 621 | 622 | 加了这三个文件后我们的store终于完整了，更新下我们的代码 623 | 624 | ```javascript 625 | // src/store/index.js 完整代码 626 | 627 | import Vue from 'vue' 628 | import Vuex from 'vuex' 629 | import mutations from './mutations' 630 | import actions from './actions' 631 | 632 | Vue.use(Vuex); 633 | 634 | const state = { 635 | totalTime: 0, 636 | list: [] 637 | }; 638 | 639 | export default new Vuex.Store({ 640 | state, 641 | mutations, 642 | actions 643 | }) 644 | 645 | ``` 646 | 647 | `this.$store.dispatch('savePlan', plan)`当执行了这样的方法就会调用`actions.js`里的`savePlan`方法，而`savePlan`又会触发 `mutations`里的 `types.SAVE_PLAN` 最后修改数据视图更新 648 | 649 | > PS：在这有个技巧就是，在`mutations`里都是用大写下划线连接，而我们的`actions`里都用小写驼峰对应。 650 | 651 | 个人理解这其实就是一个发布订阅的模式 652 | 653 | `mutation-types` 记录我们所有的事件名 654 | 655 | `mutations` 注册我们各种数据变化的方法 656 | 657 | `actions` 则可以编写异步的逻辑或者是一些逻辑，再去`commit` 658 | 我们的事件 659 | 660 | 如果有`getter` 我们可以把一些需要处理返回的数据放在这即可，不进行业务操作 661 | 662 | 最后别忘了在我们的`main.js`里使用我们的`store` 663 | 664 | ```js 665 | // src/store/main.js 666 | 667 | import store from './store' 668 | // ... 669 | 670 | var app = new Vue({ 671 | el: '#app', 672 | router, 673 | store, 674 | ...App, 675 | }); 676 | ``` 677 | 678 | 开始体验下你自己的任务计划板吧！ 679 | 680 | ## 最后 681 | 682 | 通过本文，我们可以学习到许多关于vue的特性。 683 | 684 | 1.了解了vue-cli脚手架 685 | 686 | 2.初步对webpack有了一些了解和认识 687 | 688 | 3.如何用.vue愉快的开发 689 | 690 | 4.使用vuex进行组件通信 691 | 692 | 5.路由（子路由）的应用 693 | 694 | 6.使用 vue-devtools 观察我们的数据 695 | 696 | --- 697 | 698 | 个人网站 ：http://www.meckodo.com 699 | 700 | github地址：https://github.com/MeCKodo/vue-tutorial 701 | 702 | > Have a nice day 703 | 704 | 705 | 706 | --------------------------------------------------------------------------------