首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

Posted in Javascript onJune 16, 2017

前言

首先说明这并不是一个教程贴，而记事本应用是网上早有的案例，对于学习 vuex 非常有帮助。我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用，其中最大的问题是使用 vue-cli 构建应用时遇到的问题。通过这些问题深入探索 vue 以及 vuex 。

我对于框架的学习一直断断续续，最先接触的是 react，所以有一些先入为主的观念，喜欢 react 更多一点，尤其在应用的构建层面来说。之所以断断续续，是因为自己 JS 基础较弱，刚开始学习的时候，只是比着葫芦画瓢，虽然可以做出点东西，但对于其中的一些概念仍然云里雾里，不知所云，无法深入理解框架。所以我又临时放弃框架的学习，开始学习 JS 基础。事实证明打牢基础之后，学习框架以及理解框架是神速的。而学习 webgl 和 three.js 的过程与此类似。没有 webgl 的基础，学习 three.js 只会停留在初级阶段。

我在过去的半年参加了很多面试，几乎无一例外的都会被问框架的使用情况，但是其中很多公司属于随波逐流，使用框架比较盲目。甚至觉得使用框架是极其高大上的事情。虽然我学习过框架，但毕竟没有深入学习也没有拿得出手的项目，所以只是只言片语的说两句，大部分知识是懵懂的。然而面对面试官不屑的神情以及以此作为选拔的指标，心想这样的面试官太肤浅。当然很多公司的面试还是以基础为主。框架属于探索，互相学习的状态。我在这篇文章中强调一点，学习能力以及解决问题的能力更重要。

开始吧

言归正传，对于这个笔记本案例，大家可以直接百度搜 vue notes ，这是一篇英文教程，大家看到的都是翻译的。在刚开始 vue 资料稀缺的时候，这样的文章非常珍贵。demo 点这里。说白了，算是 todoMVC 案例的一个变体。当初觉得这个例子非常好，想跟着学一学，结果一拖半年过去了。这几天终于抽时间把这个例子敲了一遍。学习在于举一反三。如果大家按照网上教程来做，那么 NPM 包默认安装的都是最新版本，运行会报错。所以如果用 vuex 2 要怎么写呢？

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

 详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

在使用 vue 2 重写这个 app 之前，我在想能不能不改变文件目录结构以及配置位置呢？就是用比较生硬的方式重写，或者说单纯的语法修改。事实是可行的，否则我就不会写这篇文章了。然而面对的问题非常多，但却因此深入的理解了 vue 以及 vuex。最大的问题是 webpack 的构建，如果使用 webpack 2.0+的话，坑比较多。本人是菜鸟，所以最终选择了 vue-cli 提供的两个 webpack 的模板，分别是 webpack-simple 和 webpack，我先使用 webpack-simple，它和原 app 的结构基本吻合。目录如下：

详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

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

main.js 的小改动

原示例 main.js 如下所示，但运行出错了，主要是 Vue 2 的根实例渲染稍有变化

import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'

new Vue({
 store, // 注入到所有子组件
 el: 'body',
 components: { App }
})

改正之后： 

import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'

new Vue({
  store, // inject store to all children
  el: '#app',
  template: '<App/>',
  components: { App }
})

或者

import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'

new Vue({
  store, // inject store to all children
  el: '#app',
  render: h => h(App)
})

vuex 2 的变化

这个应用改写的主要问题集中在 vuex 2 的变化上，这些变化确实会让人感到凌乱，我无数次抓耳挠腮的骂娘。不过通过官方给出的示例也可以看出一些端倪。

首先是 action.js，只需注意一点，所有的 dispatch 都要改成 commit。

export const addNote = ({ commit }) => {
 commit('ADD_NOTE')
}

export const editNote = ({ commit }, e) => {
 commit('EDIT_NOTE', e.target.value)
}

export const deleteNote = ({ commit }) => {
 commit('DELETE_NOTE')
}

export const updateActiveNote = ({ commit }, note) => {
 commit('SET_ACTIVE_NOTE', note)
}

export const toggleFavorite = ({ commit }) => {
 commit('TOGGLE_FAVORITE')
}

store.js 变化也不大，但是要注意几个地方：

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'

Vue.use(Vuex)

const state = {
 notes: [],
 activeNote: {}
}

const mutations = {
 ADD_NOTE (state) {
  const newNote = {
   text: 'New note',
   favorite: false
  }
  state.notes.push(newNote)
  state.activeNote = newNote
 },

 EDIT_NOTE (state, text) {
  state.activeNote.text = text
 },

 DELETE_NOTE (state) {
  state.notes.splice(state.notes.indexOf(state.activeNote),1)
  state.activeNote = state.notes[0] || {}
 },

 TOGGLE_FAVORITE (state) {
  state.activeNote.favorite = !state.activeNote.favorite
 },

 SET_ACTIVE_NOTE (state, note) {
  state.activeNote = note
 }
}

const getters = {
 notes: state => state.notes,
 activeNote: state => state.activeNote,
 activeNoteText: state => state.activeNote.text
}

export default new Vuex.Store({
 state,
 mutations,
 actions,
 getters
})

 原示例文件中没有将 getters 写到 store.js 中，而是直接在组件中定义的。为了更清晰，我仿照官方示例也提取出来写在了 store.js 中，这样在组件中调用时比较方便。其次也引入了 action.js，并作为 actions 对象传递给 Vuex.store()，这算是 vuex 的标准写法吧，对于后面在组件中调用比较有利。

其中要注意 DELETE_NOTE (state){} 这个方法，原示例使用了 vue1 提供的 remove 方法，但是 vue2 中去掉了这个方法。仔细想想就会明白，这个函数的作用就是删除 notes 数组中的元素。可以使用原生的 splice 方法。如果 JS 基础扎实的话，这里应该很好理解，没有什么大问题。其次相比原示例，添加一个删除后操作的判断。

我之前一直不太理解 flux 的概念，感觉像是新东西，完全不知道它的目的及作用。换成 Vuex，还是有点稀里糊涂。但是通过修改这个示例，基本算是开窍了。这些东西本身并没有玄机奥妙，想一想，如果我们不用框架，而是自己手写一个 todoMVC 时要怎么做？应该也是这样的思路，定义一个 notes 数组变量以及 activeNote 的变量。然后在创建一些改变状态的方法。我在面试中遇到过一个情况，面试官反复问我为什么需要使用框架，用 jQuery 不是也可以实现吗？这样说确实没错，用比较原始的方法当然可以做，只是代码结构会冗余或者凌乱，缺少小而美的特点。框架以及设计模式对代码做了整合封装，对于一个 CURD 应用比较友好，实现起来更方便更简单。我对于 Vuex 的理解就是，它是一个对象，封装了与状态相关的方法和属性。而所谓的状态就是点击、按键等操作之后的变化。

组件中使用 vuex

先看一下 Toolbar.vue 这个组件。修改后的代码如下：

<template>
 <div id="toolbar">
  <i @click="addNote" class="glyphicon glyphicon-plus"></i>
  <i @click="toggleFavorite"
   class="glyphicon glyphicon-star"
   :class="{starred: activeNote.favorite}"></i>
  <i @click="deleteNote" class="glyphicon glyphicon-remove"></i>
 </div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'

export default {
 computed: mapGetters([
  'activeNote'
 ]),
 methods: {
  ...mapActions([
   'addNote',
   'deleteNote',
   'toggleFavorite'
  ])
 }
}
</script>

 通过和原示例代码对比，这里的区别一目了然。我通过在控制台打印 Vue 实例，折腾很长时间才大体明白怎么回事。vuex 1 在组件中使用时会直接将 getters 以及 actions 挂到 vuex 这个属性上，没有提供 mapGetters 及 mapActions 等一些方法。而 vuex2 使用 mapGetters 及 mapActions 等一些方法将 actions 的方法挂到 Vue 实例上。总的来说，都是把 actions 的方法挂到 Vue 实例上。我们从这个层面上谈谈 Vue 实例，Vue 2 的变化就是其属性的变化。比如 Vue1 中在 methods 中添加的方法可以在 vue 实例的 $options 属性中查看，而 vue2 中这些方法可以直接在第一级属性中查找或者在 $options 属性下的原型方法中 __proto__ 寻找。在 vue1 中可以查看 vuex 这个属性，但是 vue2 中移除了。至于其它的不同，大家可以自己对比，通过这种方式，可以深入理解 vue 的设计思想。

下图是 Vue1 实例截图：

详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

ES5 实现扩展运算符

假设其它组件都以这种方式改好了，就在我们满心欢喜地运行示例时，又报错了。问题出在扩展运算符 ... 上，webpack-simple 这个模板无法解析 ES6 的 ...。为此，我又折腾了很久，想试着修改 webpack  的配置文件，但改动太大。我妥协了，决定抛弃扩展运算符，手写这个方法。当然如果使用 webpack 的模板就没有问题，这个比较简单，我们最后再说。

手写扩展运算符 ... 之前，我们先看一下 mapActions 这个方法。对于 mapGetters 以及 mapActions 这两个函数，最简单的理解办法就是查看 vuex 的源码，最终返回的是一个对象。也就是根据需要获取 store.js 中 actions 对象的某些方法。然后通过扩展运算符把返回的对象拆开然后挂到 Vue 实例上。举例来说（以下只是扩展运算符的用法之一，别的用法可以参考其它的文章）： 

var obj = {
  a: 1,
  b: 2,
}

var methods = {
  ...obj
}

// console.log(methods)
{
  a: 1,
  b: 2
}

明白扩展运算符的用法之后就好办了。为了简单一点，我直接使用 babel 官网的在线解析器，查看扩展运算符的 ES5 写法。 

// 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 id="toolbar">
  <i @click="addNote" class="glyphicon glyphicon-plus"></i>
  <i @click="toggleFavorite"
   class="glyphicon glyphicon-star"
   :class="{starred: activeNote.favorite}"></i>
  <i @click="deleteNote" class="glyphicon glyphicon-remove"></i>
  <i @click="_test" class="glyphicon glyphicon-remove"></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 id="notes-list">

  <div id="list-header">
   <h2>Notes | coligo</h2>
   <div class="btn-group btn-group-justified" role="group">
    <!-- All Notes button -->
    <div class="btn-group" role="group">
     <button type="button" class="btn btn-default"
      @click="show = 'all'"
      :class="{active: show === 'all'}">
      All Notes
     </button>
    </div>
    <!-- Favorites Button -->
    <div class="btn-group" role="group">
     <button type="button" class="btn btn-default"
      @click="show = 'favorites'"
      :class="{active: show === 'favorites'}">
      Favorites
     </button>
    </div>
   </div>
  </div>
  <!-- render notes in a list -->
  <div class="container">
   <div class="list-group">
    <a v-for="note in filteredNotes"
     class="list-group-item" href="#" rel="external nofollow" 
     :class="{active: activeNote === note}"
     @click="updateActiveNote(note)">
     <h4 class="list-group-item-heading">
      {{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 id="note-editor">
  <textarea
   :value="activeNoteText"
   @input="editNote"
   class="form-control">
  </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 框架。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

- Author -

nzbin

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 无提示关闭窗口脚本
Aug 17 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办
Jan 04 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
微信小程序 出现错误：{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
对node.js中render和send的用法详解
May 14 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
package.json配置文件构成详解
Aug 27 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
基于AngularJS实现的工资计算器实例
Jun 16 #Javascript
Angular+Node生成随机数的方法
Jun 16 #Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 #Javascript
vue高德地图之玩转周边
Jun 16 #Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 #Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 #Javascript
vue之数据交互实例代码
Jun 16 #Javascript
AOP(2) 验证表达式(1) 动态权限(1) 记事本(1) Android Gradle(1) promise(2) Spring Security(2) Kotlin(1) redis(3) XDM(3)
You might like
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
浅谈Vue.js
2017/03/02 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python实现图像几何变换
2015/07/06 Python
python简单文本处理的方法
2015/07/10 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
python3中布局背景颜色代码分析
2020/12/01 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
StubHub澳大利亚：购买或出售您的门票
2019/08/01 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
学校节能减排方案
2014/06/13 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
2015年加油站工作总结
2015/05/13 职场文书
初中语文教学随笔
2015/08/15 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
Python字符串的转义字符
2022/04/07 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers