// ES5 实现扩展运算符... var _extends = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
完整的 Toolbar.vue 组件代码如下：
<template> <div> <i @click="addNote"></i> <i @click="toggleFavorite" :class="{starred: activeNote.favorite}"></i> <i @click="deleteNote"></i> <i @click="_test"></i> </div> </template> <script> import { mapGetters, mapActions } from 'vuex' // ES5 实现扩展运算符... var _extends = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var actions = mapActions([ 'addNote', 'deleteNote', 'toggleFavorite' ]); var methodsObj = _extends({},actions) export default { computed: mapGetters([ 'activeNote' ]), methods:methodsObj } </script>
其余两个子组件类似，相信大家已经明白了我的思路，具体代码如下：
NotesList.vue
<template> <div> <div> <h2>Notes | coligo</h2> <div role="group"> <!-- All Notes button --> <div role="group"> <button type="button" @click="show = 'all'" :class="{active: show === 'all'}"> All Notes </button> </div> <!-- Favorites Button --> <div role="group"> <button type="button" @click="show = 'favorites'" :class="{active: show === 'favorites'}"> Favorites </button> </div> </div> </div> <!-- render notes in a list --> <div> <div> <a v-for="note in filteredNotes" href="#" :class="{active: activeNote === note}" @click="updateActiveNote(note)"> <h4> {{note.text.trim().substring(0, 30)}} </h4> </a> </div> </div> </div> </template> <script> import { mapGetters, mapActions } from 'vuex' // ES5 实现扩展运算符... var _extends = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var getters = mapGetters([ 'activeNote' ]); var filters = { filteredNotes: function () { if (this.show === 'all'){ return this.$store.state.notes } else if (this.show === 'favorites') { return this.$store.state.notes.filter(note => note.favorite) } } } var actions = mapActions(['updateActiveNote']) var computedObj = _extends({},getters,filters); var methodsObj = _extends({},actions); export default { data () { return { show: 'all' } }, computed:computedObj, methods:methodsObj } </script>
Editor.vue
<template> <div> <textarea :value="activeNoteText" @input="editNote"> </textarea> </div> </template> <script> import { mapGetters, mapActions } from 'vuex' export default { computed:mapGetters(['activeNoteText']), methods:mapActions(['editNote']) } </script>
Webpack 模板
直接使用 vue-cli 的 webpack 模板就会简单很多，可以直接解析扩展运算符，代码也会比较简洁。我就不多说了，直接贴上 github 的地址，大家有不懂的可以看一下：https://github.com/nzbin/notes-app-vuejs2-vuex2
总结
终于写完了这篇文章，感慨颇多。这个例子比较典型，学习的人很多，可能我并不是第一个重写这个案例的人，我只是与大家分享我的一些心得。顺便提一句，为了重写这个示例并解决遇到的这些小问题，我们可能要使用很多资源，比如 github、codePen、stackoverflow、npm 官网、babel 官网、vuejs 官网、vuex 官网、博客等等。回头再想想 Vue 到底是什么，一个对象，没错，一个集合了很多属性和方法的对象。为什么要强调面向对象的重要性，可能这就是最好的阐释，包括 jQuery、react、其它框架等等。一旦遇到问题，在控制台打印 Vue 实例，反复查看其属性可能很有帮助。
最后发个预告，下一篇文章我想探讨一下面向对象的 CSS，分析几个优秀的 UI 框架，我相信每个人都可以书写属于自己的 CSS 框架。