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 条评论
登录 后参与评论

相关文章

来自专栏吉浦迅科技

DAY20:阅读Surface Memory

1042
来自专栏大史住在大前端

javascript基础修炼(5)—Event Loop

如果没有详细钻研过异步队列,答对的可能性很低。题目的考察点很明确,就是javascript中最核心的特点之一的【异步】,了解了原理以后,你就会明白javascr...

682
来自专栏racaljk

2017第八届蓝桥杯决赛(C++ B组)4.发现环

小明的实验室有N台电脑,编号1~N。原本这N台电脑之间有N-1条数据链接相连,恰好构成一个树形网络。在树形网络上,任意两台电脑之间有唯一的路径相连。 不过在最...

924
来自专栏小灰灰

Java 借助ImageMagic实现图片编辑服务

Java 借助ImageMagic实现图片编辑服务 java原生对于图片的编辑处理并没有特别友好,而且问题也有不少,那么作为一个java后端,如果要提供图片的编...

4056
来自专栏FreeBuf

WireShark+Winhex:流量分析的好搭档

这篇文章你将学会的知识点有 1、进阶的wireshark的流量分析、解码、追踪流、导出文件 2、利用hackbar进行base64、URL编码转换 3、利用wi...

4726
来自专栏SDNLAB

码农学ODL之Toaster代码解析

Toaster(烤面包机)是OpenDaylight的一个例子,该例子的目的不是让你如何烤面包,而是借这个例子学习OpenDaylight的特性。在Toaste...

3786
来自专栏数据小魔方

树状图(Tree Map)

今天跟大家分享的是树状图! ▼ 树状图(treemap)是一种经常用来展示多层级数据的分析工具。主要是使用矩形的面积、颜色、来显示复杂的层级数据关系,能够直观体...

39010
来自专栏Youngxj

烧脑之作impress js幻灯片

1184
来自专栏祝威廉

TensorFlowOnSpark 源码解析

这两天琢磨了下spark-deep-learning和spark-sklearn两个项目,但是感觉都不尽人如意。在training时,都需要把数据broadca...

762
来自专栏非著名程序员

代码实验室--带你一步步理解使用 ConstraintLayout

? 说明 这次 IO 给开发者带来了很多惊喜, ConstraintLayout 是其中较为实用的之一. Google 第一时间发布了官方的代码实验室指导教程...

1966

扫码关注云+社区