详细探索vuex 2.0 用vuejs 2.0 vuex 2.0构建记事本应用

序

首先这不是教程帖，但记事本应用是互联网上的早期案例，对学习vuex很有帮助。我的目的是探索vuex 2.0，然后用vuejs 2.0 vuex 2.0重写这个应用程序。最大的问题是使用vue-cli构建应用程序时遇到的问题。通过这些问题深入探究vue和vuex。

一直断断续续的学习框架，接触到的第一件事就是react，所以有一些先入为主的想法，比较喜欢react，尤其是在应用构建层面。之所以这样，是因为我的JS基础比较薄弱。刚开始学的时候，只是和葫芦画比。虽然我能做出一些东西，但有些概念还是云里雾里，框架理解不深。所以我暂时放弃了学习框架，开始学习JS基础。事实证明，打牢基础后，学习框架和理解框架都快了。webgl和three.js的学习过程类似。没有webgl的基础，学习三. js只会停留在初级阶段。

在过去的六个月里，我参加了许多面试，几乎无一例外，我都会被问到框架的使用情况。但是很多都是随波逐流，盲目使用框架。甚至认为使用框架极高。虽然我研究过框架，但毕竟没有深入研究，也没有得到什么项目，所以只是说了几句，大部分知识都是无知的。但是面对面试官不屑的表情，并以此作为选择的指标，我觉得这样的面试官太肤浅了。当然，很多公司的面试还是以基础为主。框架属于相互探索、相互学习的状态。在这篇文章中，我强调学习能力和解决问题的能力更重要。

我们开始吧

离家近一点，对于这个笔记本案例，可以直接在百度上搜索vue笔记，这是一个英文教程，看到的都是翻译。最初，当vue材料稀缺时，这样的物品非常珍贵。演示，点击这里。说白了，就是todoMVC案例的变种。一开始我觉得这个例子很好，想从中学习。结果，半年过去了。这些天我终于花时间把这个例子推翻了。学习在于举一反三。如果您遵循在线教程，默认情况下，NPM软件包将安装最新版本，并且它将在运行时报告错误。那么如果使用vuex 2应该写什么呢？

以下是notes-vuex-app的源文件目录：

在用vue 2重写这个应用之前，我想知道我是否不能改变文件目录结构和配置位置。也就是说，用相当生硬的方式重写，或者简单地修改语法。事实是可行的，否则我不会写这篇文章。但是，问题很多，但是我们对vue和vuex有很深的理解。最大的问题是webpack的构建。如果使用webpack 2.0，会有很多坑。我是新手，所以最后选择了vue-cli提供的两个webpack模板，分别是webpack-simple和webpack。我将首先使用webpack-simple，它基本上与原始应用程序的结构相匹配。目录如下：

使用vue-cli生成基本目录，然后安装vuex2。

main.js的小改动

下面显示了最初的例子main.js，但它运行不正确，主要是因为Vue 2的根实例呈现略有变化

从“vue”导入vue，从“导入存储”。/vuex/store“从导入应用程序”。/组件/应用。vue' newvue ({store，//注入所有子组件el:' body '，components: { app } })已更正：

从“vue”导入Vue，从“导入存储”。/vuex/store“从导入应用程序”。/components/app . Vue ' new Vue({ store，//将store注入所有子级el:' # app '，模板：' app/'，组件： {app}})或

从“vue”导入vue，从“导入存储”。/vuex/store“从导入应用程序”。/组件/应用。vue' new vue ({store，//将store注入所有子级el:' # app '，render :h=h (app)})对vuex2的更改

这次应用重写的主要问题集中在vuex 2的改动上，真的让人觉得很乱，我也挠了好多次头。然而，从官方的例子中可以看到一些线索。

首先是action.js只需注意一个事实，所有的调度都应该改为提交。

export const addNote=({ commit })={ commit(' ADD _ NOTE ')} export const editNote=({ commit }，e)={ commit('EDIT_NOTE '，e . target . value)} export const DELETE NOTE=({ commit })={ commit(' DELETE _ NOTE ')} } export const updateActiveNote=({ commit }，Note)={commit ('set _ active _ note '，note)} export const toggle收藏夹=({commit})={commit ('toggle _收藏夹')} store.js变化不大。

从“vue”导入Vue从“Vuex”导入Vuex *作为操作从。/actions ' vue . use(Vuex)const state={ notes :[]，activeNote: {}}const突变={ ADD _ NOTE(state){ const New NOTE={ text : ' New NOTE '，FAVORITE : false } state . notes . push(New NOTE)state . active NOTE=New NOTE }，EDIT_NOTE (state，text){ state . active NOTE . text=text }，_ DELETE _ NOTE(state){ state . NOTE . splice(state . notes indexof(state . notes)。state.activeNote .收藏夹}，SET_ACTIVE_NOTE (state，NOTE){ state . ACTIVE NOTE=NOTE } } const getter={ notes : state=state . notes，ACTIVE NOTE : state=state . ACTIVE NOTE，ACTIVE NOTE text : state=state . ACTIVE NOTE . text }导出默认新Vuex。Store({ state，transitions，Actions，getter })getter没有被写入原始示例文件中的store.js，而是直接在组件中定义的。为了清楚起见，我复制了官方的例子并提取出来，写在store.js中，这样在组件中调用就方便了。其次，还引入了action.js作为actions对象传递给Vuex.store()，这被认为是Vuex的标准编写，有利于以后在组件中调用。

应注意DELETE_NOTE (state){}方法。最初的示例使用了vue1提供的remove方法，但该方法已从vue2中删除。仔细想一想，就会明白这个函数是删除notes数组中的元素。您可以使用本机拼接方法。如果JS基础扎实，在这里应该很好理解，没有大问题。其次，与原例相比，增加了删除后的操作判断。

之前不太理解通量的概念，感觉像是新东西，完全不知道它的用途和作用。有了Vuex，我还是有点迷茫。但是通过修改这个例子，它基本上是开明的。这些事情并不神秘。想一想，如果用手工而不是用框架写一个todoMVC，我们该怎么办？应该是同样的思路，定义一个notes数组变量和一个activeNote变量。然后创造一些改变状态的方法。我在采访中遇到了一个情况。面试官反复问我为什么需要用框架。jQuery不能用吗？说这话是真的。用原始的方法当然可以做到，但是代码结构会冗余或者凌乱，缺乏小巧美观的特点。框架和设计模式对代码进行了集成和封装，对凝乳应用程序友好，实现起来更加方便简单。我对Vuex的理解是，它是一个封装与状态相关的方法和属性的对象。所谓状态，就是点击、按下等操作后的变化。

在组件中使用vuex

让我们先来看看Toolbar.vue组件。修改后的代码如下：

template div id=' toolbar ' I @ click=' addNote ' class=' glyphicon glyphicon-plus '/I I @ click=' toggle favorite ' class=' glyphicon glyphicon-star ' : class=' { starred : active note . favorite } '/I @ click=' delete note ' class=' glyphicon glyphicon-remove '/I/div/templatescript import { mapgeters，Map actions}从' vuex ' export default { computed : Map getter.map actions (['add note '，' delete note '，' toggle收藏夹'])}}/script通过与原始示例代码进行比较，这里的区别很明显。通过在控制台上打印Vue实例，我花了很长时间才大致了解发生了什么。当在组件中使用vuex 1时，getters和actions直接链接到属性vuex，并且没有提供mapGetters和mapActions等一些方法。而Vuex2使用一些方法，比如mapGetters和mapActions，将Actions方法挂在vue实例上。一般来说，actions方法挂在Vue实例上。我们从这个层面来讲Vue的例子，Vue 2的变化就是它属性的变化。例如，可以在vue实例的$options属性中查看添加到vue1中方法的方法，而vue2中的这些方法可以直接在一级属性中搜索，或者在$options属性下的原型方法中搜索__proto__方法。属性vuex可以在vue1中查看，但在vue2中被删除。至于其他区别，你可以自己比较。这样你就能深刻理解vue的设计思想。

下图是Vue1示例的截图：

ES5实现了扩展运算符

假设所有其他组件都以这种方式进行了修改，当我们高兴地运行该示例时，我们将再次报告一个错误。问题出在扩展运算符上.模板webpack-simple无法解析.ES6的。为此我纠结了很久，试图修改webpack的配置文件，但是改动太大了。我妥协了，决定放弃扩展运算符，手工编写这个方法。当然，如果使用webpack的模板，也不会有问题。这个比较简单，最后再说。

手写扩展运算符.之前，我们先来看看mapActions方法。对于mapGetters和mapActions来说，理解它们最简单的方法就是查看vuex的源代码，最后返回一个对象。也就是说，需要一些方法来获取store.js中的actions对象。然后，返回的对象被扩展操作符分解，然后挂在Vue实例上。例如(以下仅为扩展运算符的一种用法，其他用法可参考其他文章):

Varobj={a: 1，b: 2，} varmethods={.obj }//console . log(methods){ a : 1，b: 2}扩展运算符的用法很容易理解。为了简单起见，我直接使用巴别塔官网的在线解析器来检查扩展运算符的ES5编写。

//ES5实现扩展运算符.var _ extends=object . assign | | function(target){ for(var I=1；一、论点.长度；I){ var source=arguments[I]；for(源中的var键){ if(object . prototype . hasown property . call(source，key)){ target[key]=source[key]；} } }返回目标；};完整的Toolbar.vue组件代码如下：

template div id=' toolbar ' I @ click=' addNote ' class=' glyphicon glyphicon-plus '/I I @ click=' toggle favorite ' class=' glyphicon glyphicon-star ' : class=' { starred : active note。收藏夹} '/I @ click=' delete note ' class=' glyphicon glyphicon-remove '/I @ click=' _ test ' class=' glyphicon glyphicon-remove '/I/div/templatest import { mapp实现扩展运算符.var _ extends=object。赋值| |函数(目标){ for(var I=1；一、论点。长度；I){ var source=arguments[I]；用于(源中的定义变量键){ if(object。原型。拥有自己的财产。call(source，key)){ target[key]=source[key]；} } }返回目标；};var actions=mapActions([' addNote '，' deleteNote '，'切换收藏夹']);var方法obj=_ extends({ }，actions)导出默认{ computed : mapgetter([' active note '])，method : method obj }/脚本其余两个子组件类似，相信大家已经明白了我的思路，具体代码如下：

NotesList.vue

模板div id=' notes-list ' div id=' list-header ' H2 notes | coligo/H2 div class=' BTN-BTN组-组对齐'角色='group '！-所有笔记按钮-div class=' BTN-组'角色='group '按钮类型=' button ' class=' BTN BTN-默认' @ click=' show=' All ' ' : class=' { active : show==' All ' } ' All Notes/button/div！-收藏夹Button-div class=' BTN-组'角色='组' Button type=' Button ' class=' BTN BTN-默认' @ click=' show='收藏夹' :class='{active: show=='收藏夹' } '收藏夹/button /div /div！-在列表中呈现注释-div class=' container ' div class=' list-group ' a v-for=' note in filtered notes ' class=' list-group-item ' href=' # ' rel=' external no follow ' : class=' { active : activeNote===note } ' @ click=' updateActiveNote(note)' H4 class=' list-group-item-heading ' { note。文字。trim().substring(0，30)} }/H4/a/div/div/templatescriptimport { mapgeters，mapActions }来自vuex '/ES5实现扩展运算符.var _ extends=object。赋值| |函数(目标){ for(var I=1；一、论点。长度；I){ var source=arguments[I]；用于(源中的定义变量键){ if(object。原型。拥有自己的财产。call(source，key)){ target[key]=source[key]；} } }返回目标；};var getter=map getter([' active note '])；var filters={ filtered notes 3360 function(){ if(this。show==' all '){返回这个.$商店。国家。注释}否则如果(这。show===' favorites '){返回这个.$商店。国家。笔记。过滤器(注意=注意。收藏夹)} } } var actions=mapActions([' updateActiveNote '])var computedObj=_ extends({ }，getters，filters)；var方法obj=_ extends({ }，actions)；导出默认{ data(){ return { show : ' all ' } }，computed:computedObj，method : method obj }/脚本编辑器。某视频剪辑软件

模板div id=' note-editor ' textarea : value=' active note text ' @ input=' editNote ' class=' form-control '/textarea/div/template script从' vuex '导入{ mapgeters，mapActions }导出默认值{ computed : mapgeters([' active note text '])，方法： apats([' editNote '])}/scriptWebpack模板

直接使用vue-cli的webpack模板就会简单很多，可以直接解析扩展运算符，代码也会比较简洁。我就不多说了，直接贴上开源代码库的地址，大家有不懂的可以看一下：https://github。com/NZ bin/notes-app-vuejs 2-vuex 2

总结

终于写完了这篇文章，感触良多。这个例子很典型，要学习的人也很多。也许我不是第一个改写这个案子的人。我只想和你分享一些我的经历。顺带一提，为了重写这个例子，解决这些小问题，我们可能需要用到很多资源，比如github、codePen、stackoverflow、npm官网、babel官网、vuejs官网、vuex官网、blog等等。回头想想Vue是什么，一个对象，是的，一个有很多属性和方法的对象。也许这就是为什么我们应该强调面向对象的重要性的最好解释，包括jQuery、react、其他框架等等。如果出现问题，在控制台上打印Vue实例并重复查看其属性可能会有所帮助。

最后，我会给一个通知。在下一篇文章中，我想讨论面向对象的CSS，并分析几种优秀的UI框架。相信大家都能写出自己的CSS框架。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。