HTML5技术

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

字号+ 作者:H5之家 来源:H5之家 2017-04-25 09:02 我要评论( )

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

前言

首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 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 的源文件目录:

 

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

使用 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 })

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~ - ygjoe

    移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~ - ygjoe

    2017-04-16 11:00

  • 【react框架】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的

    【react框架】利用shouldComponentUpdate钩子函数优化react性能以及

    2017-04-16 09:02

  • HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试 - 敢言

    HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试 - 敢言

    2017-02-20 12:00

  • CSS gradient渐变之webkit核心浏览器下的使用以及实例 - 孟然

    CSS gradient渐变之webkit核心浏览器下的使用以及实例 - 孟然

    2017-02-04 15:00

网友点评