vuex构建笔记本应用学习

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对象中的数据进行组件数据的回显了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏https://www.cnblogs.com/L

Python爬虫知识点四--scrapy框架

o 引擎(Scrapy Engine) o 调度器(Scheduler) o 下载器(Downloader) o 蜘蛛(Spiders) o 项目管道...

1055
来自专栏技术专栏

Scrapy基础(二): 使用详解

scrapy的安装和基本介绍请看 http://www.jianshu.com/p/a71386fa317a

1232
来自专栏逆向技术

COM_第四讲_保存GUID_优化使用代码

    优化以前的代码,让使用者更方便 一丶 优化思路 1.我们可以将我们写的GUID(类工厂的ID)保存到注册表中,并且保存一下DLL的文件路径,遍历注册表去...

2020
来自专栏向治洪

Android ORM 框架之 greenDAO

前言 我相信,在平时的开发过程中,大家一定会或多或少地接触到 SQLite。然而在使用它时,我们往往需要做许多额外的工作,像编写 SQL 语句与解析查询结果等。...

1886
来自专栏码匠的流水账

JDK 10.0.1发布

2018年4月17日,JDK 10.0.1发布,主要是少部分api更新及bug修复

961
来自专栏崔庆才的专栏

Scrapy框架的使用之Item Pipeline的用法

3383
来自专栏有趣的Python

2018.2最新-Scrapy+elasticSearch+Django打造搜索引擎直至部署上线(四)伯乐在线爬取所有文章

最终项目上线演示地址: http://search.mtianyan.cn 第四节:开工啦,开工啦。这节我们爬点数据试试手,并且存起来。存到json,mysql...

5099
来自专栏崔庆才的专栏

Scrapy 爬虫框架入门案例详解

本篇会通过介绍一个简单的项目,走一遍Scrapy抓取流程,通过这个过程,可以对Scrapy对基本用法和原理有大体的了解,作为入门。

1.9K0
来自专栏大数据

Scrapy入门

Scrapy是一个基于Python的网络爬虫,可以用来从网站提取信息。它快速简单,可以像浏览器一样浏览页面。

2151
来自专栏小怪聊职场

爬虫课堂(二十)|编写Spider之使用Item Pipeline处理数据

2615

扫码关注云+社区