vuex:针对vue应用派生的专门管理应用state的工具,state可以理解为我们组件需要操作的data数据,都知道,vue构建spa应用的时候,随着组件规模的提升,各个子组件之间的通信如果采用子组件->dispatch->父组件->broadcast->子组件的方式将会异常坑爹,因为你要时刻清楚该事件是由哪个组件传过来的又将传送到哪个组件,vuex的诞生便是将这些数据流动统一交由vuex去处理,组件要做的仅仅是向state中放值及取值。vuex总计分为四大组件,分别是:state、mutations、getters及actions,其中state就是我们要操作的数据,在组件中通过getters获取,mutations好比各个事件,由actions通过dispatch调用,而mutations操作state后可以直接在组件getters获取该state数据,这样就形成了一个数据的闭环。官方的示意图如下:

学习vue.js的时候看到有哥们写的笔记本应用,用到的技术栈:vue.js、vuex、webpack,原文链接点这里,先来看下效果图:

其实主要是对vuex的一个学习总结,项目结构如下:

首先是组件:

该应用总共分为3大组件:toolbar侧边栏组件、notelist笔记列表组件、editor编辑区组件,下面拿toolbar组件说下,先来看下toolbar组件代码:

<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 { addNote, deleteNote, toggleFavorite } from '../vuex/actions' export default {
vuex: {
getters: {
activeNote: state => state.activeNote
},
actions: {
addNote,
deleteNote,
toggleFavorite
}
}
}
</script>

这里先导入需要调用的actions,然后通过export导出vuex配置对象,webpack自动会为我们打包,这里的getters包含了一个函数activeNote,所有getters函数第一个参数是vuex的state对象,也就是数据源对象,在getters函数内部可以直接通过state取出相关数据,这里是es6的写法而已。然后actions中定义了一系列组件单击调用的方法,比如addNote,再来看下actions.js内部具体的写法:

export const addNote = ({
dispatch
}) => {
dispatch('ADD_NOTE')
} export const editNote = ({
dispatch
}, e) => {
dispatch('EDIT_NOTE', e.target.value)
} export const deleteNote = ({
dispatch
}) => {
dispatch('DELETE_NOTE')
} export const updateActiveNote = ({
dispatch
}, note) => {
dispatch('SET_ACTIVE_NOTE', note)
} export const toggleFavorite = ({
dispatch
}) => {
dispatch('TOGGLE_FAVORITE')
}

上面的addNote调用的actions就是这里的addNote,形参dispatch用来向mutations派发事件,这里的actions还有一个默认参数就是e,代表当前操作的html对象,当然通过e.target.value可以直接获取input输入框的值。mutations中详细代码:

import Vue from 'vue'
import Vuex from 'vuex' 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.$remove(state.activeNote)
state.activeNote = state.notes[0]
}, TOGGLE_FAVORITE(state) {
state.activeNote.favorite = !state.activeNote.favorite
}, SET_ACTIVE_NOTE(state, note) {
state.activeNote = note
}
} export default new Vuex.Store({
state,
mutations
})

mutations中的参数个数和从actions那里dispatch过来的一样,dispatch有几个参数,这里mutations就有几个,在mutations中,一般进行state数据的相关操作,比如这里的ADD_NOTE就是向state中的notes对象数组添加新的对象,然后再设置当前note处于激活状态,这里设置好值之后,在组件中的getters里面,便直接可以通过获取state对象中的数据进行组件数据的回显了。

vuex构建笔记本应用学习的更多相关文章

  1. vuex状态管理之学习笔记

    概述及使用场景 Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构.它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护.可理解的状态. 但如果是简单的应用 ,就没有必 ...

  2. ArcGIS模型构建器案例学习笔记-字段处理模型集

    ArcGIS模型构建器案例学习笔记-字段处理模型集 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 由四个子模型组成 子模型1:判断字段是否存在 方法:python工 ...

  3. ArcGIS模型构建器案例学习-批量删除空要素类地理模型

    ArcGIS模型构建器案例学习笔记-批量删除空要素类地理模型 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:批量删除记录个数为0的矢量文件 优点:逻辑清晰,不 ...

  4. 用vuex构建单页

    原文地址:点我 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和 ...

  5. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  6. 新一代构建工具gradle学习

    简介:Gradle的出现,是技术发展的必然,站在了Ant.maven等构建工具的肩膀上,使用了一种强大且具有表达性的基于Groovy的领域特定语言(DSL),使其拥有易用且灵活的方式去实现定制逻辑.方 ...

  7. vue+vuex构建单页应用

    基本 构建工具: webpack 语言: ES6 分号:行首分号规则(行尾不加分好, [ , ( , / , + , - 开头时在行首加分号) 配套设施: webpack 全家桶, vue 全家桶 项 ...

  8. NodeJS7-1本地构建_gulp入门学习

    NodeJS在前端最常用的两种方式: 1.做成webserver 2.做成前端开发的相关工具 本地构建:前端发布代码都会经过压缩(谁来处理) ,前端技术的日新月异,利用新特性代码变得易读,清晰,可是老 ...

  9. 使用horovod构建分布式深度学习框架

    最近两周一直在尝试着分布式深度学习的架构,主要的原因一方面是几台机子全是1060卡,利用深度网络在较大数据样本上训练的效率极其低下,所以尝试着将几台机子做成分布式,看看能否提高训练效率:第二方面是有人 ...

随机推荐

  1. Angularjs Scope 原型链

    我们知道scope是可以继承的.scope的继承和js原型链是同一个概念. <div ng-controller="parentCtrl"> {{name}} < ...

  2. ExpandableList列表的简单应用

    package com.test;//Download by http://ww.codefans.netimport java.util.ArrayList;import java.util.Has ...

  3. 如何在Excel中启用宏?

    OFFICE2003版本中启用宏的方法: 1.首先打开EXCEL应用程序. 2.点击上方的"工具"--"宏"--"安全性" 3.在" ...

  4. openstack debugs

  5. switchover和failover

    Dataguard中primary和standby间的角色切换包括两种:1. switchoverprimary和standby互换角色,一般都是人为的有计划的,主要用于主机或数据库的升级,不会有数据 ...

  6. 修改http中的refer(转)

    Referrer的重要性 HTTP请求中有一个referer的报文头,用来指明当前流量的来源参考页.例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页,那么就r ...

  7. Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)

    Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子) 由其做动态编程时非常有用,必须符合js中的语法,用eval能够执行. var aaa="alert('这是变量中的语句')&q ...

  8. 学习设计模式--观察者模式(C++)

    1. 说说简单的函数回调 首先说说一种简单的函数回调机制(一种通过获取对象的指针来进行函数的调用方法)以下是代码演示--- 这是观察者(被回调)部分: class Observer { public: ...

  9. 使用boost中的线程池

      #include <boost/thread/thread.hpp>#include <boost/bind.hpp>#include <iostream> u ...

  10. sqlserver,执行生成脚本时“引发类型为“System.OutOfMemoryException”的异常”(已解决)

    sqlserver,执行生成脚本时“引发类型为“System.OutOfMemoryException”的异常”(已解决) 出现此错误主要是因为.sql的脚本文件过大(一般都超过100M)造成内存无法 ...