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

相关文章

来自专栏ChaMd5安全团队

pwnhub年前最后一战——“血月归来”writeup

一共两题,一题是固件逆向,一题是pwn。 key–逆向 这是一个嵌入式固件的逆向。 固件逆向,第一要做的就是确定片型和板型。 确定片型可以知道硬件资源,通用寄存...

3968
来自专栏刘望舒

只了解View的事件分发是不够的,来看下输入系统对事件的处理

在上一篇文章中,我们学习了IMS的诞生(创建),IMS创建后还会进行启动,这篇文章我们来学习IMS的启动过程和输入事件的处理。

1012
来自专栏A周立SpringCloud

Docker系列教程25-练习:使用Docker Compose编排WordPress博客

1402
来自专栏码代码的陈同学

15min运维之Docker运行Jenkins从开始到放弃

某新环境需要Jenkins,准备用docker "一条run命令搞定"。其他工具用docker屡试不爽,这次Jenkins是从开始到放弃。

1773
来自专栏咖啡的代码人生

(BAE)jetty8+struts2导致 welcome-file-list 失效

最近在使用BAE的过程中,有个问题始终解决不了,在配置struts2框架环境的时候, 如果拦截配置的是<url-pattern>/*</url-patter...

3679
来自专栏Python、Flask、Django

精简Python项目的Dockerfile

1544
来自专栏容器云生态

Docker初探(一)-有关docker的介绍和简单使用

先分享一下构建好的image(源码部署的Nginx)    https://hub.docker.com/r/xxbandy123/centos/ 本地do...

3059
来自专栏搜云库

Docker Image 解决镜像无法删除的问题

Error response from daemon: conflict: unable to delete 4ac2d12f10cd (must be for...

32410
来自专栏CodingToDie

天才第一步 Docker 纸尿裤

Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到...

2913
来自专栏圣杰的专栏

.NET Core+MySql+Nginx 容器化部署

1. 引言 上两节我们通过简单的demo学习了docker的基本操作。这一节我们来一个进阶学习,完成ASP.NET Core + MySql + Nginx的容...

4048

扫码关注云+社区