欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 17:22:44
前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助。我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vu...

前言

首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 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 的地址,大家有不懂的可以看一下:

总结

终于写完了这篇文章,感慨颇多。这个例子比较典型,学习的人很多,可能我并不是第一个重写这个案例的人,我只是与大家分享我的一些心得。顺便提一句,为了重写这个示例并解决遇到的这些小问题,我们可能要使用很多资源,比如 github、codepen、*、npm 官网、babel 官网、vuejs 官网、vuex 官网、博客等等。回头再想想 vue 到底是什么,一个对象,没错,一个集合了很多属性和方法的对象。为什么要强调面向对象的重要性,可能这就是最好的阐释,包括 jquery、react、其它框架等等。一旦遇到问题,在控制台打印 vue 实例,反复查看其属性可能很有帮助。

最后发个预告,下一篇文章我想探讨一下面向对象的 css,分析几个优秀的 ui 框架,我相信每个人都可以书写属于自己的 css 框架。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。