专栏首页西安-晁州vuex构建笔记本应用学习

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

相关文章

  • GridFS使用及配合nginx实现文件服务

    Mongodb下GridFS使用及配合nginx实现文件服务 一、GridFS简介 GridFS是mongodb下用来存储文件的一种规范,所有官方支持的驱动均实...

    用户1141560
  • vue.js应用开发笔记

    看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项...

    用户1141560
  • golang学习之win7下go web之revel安装

    接着上回记录的win7下go环境搭建,go的开发,现在除了sublime外,LiteIDE比较推荐,下载链接 下载安装后直接打开,需要配置下go环境(本机使用的...

    用户1141560
  • 记一次腾讯SDK源代码审计后的CSRF攻击

    0x00 前言 初进ChaMd5安全团队,应M姐姐之邀写下这篇技术文章,这篇文章主要讲述本人近期代码审计腾讯的第三方登录SDK包时发现的一个漏洞,阅读这篇文章需...

    ChaMd5安全团队
  • [译] 从头为 Vue.js 3 实现 Vuex

    原文:https://medium.com/@lachlanmiller_52885/vue-3s-alpha-has-been-out-for-a-while...

    江米小枣
  • 小程序云开发仿爱彼迎小程序 | 云开发实战

    目前作者只完成了主页、日期的选择及一个主题民宿页面,这附上源码地址:https://github.com/BeichenloveNancy/mpvue-airb...

    腾讯云开发TCB
  • tensorflow学习笔记(三十七):如何自定义LSTM的initial state

    如何初始化LSTM的state LSTM 需要 initial state。一般情况下,我们都会使用 lstm_cell.zero_state()来获取 ini...

    ke1th
  • Chrome插件开发之隐藏页面图片

    forrestlin
  • 一次性比较目前前端最流行的状态管理,mobx,vuex,redux-saga使用方式用方式

    杭州前端工程师
  • 几种服务器端IO模型的简单介绍及实现(下)

    5、使用事件驱动库libevent的服务器模型 Libevent 是一种高性能事件循环/事件驱动库。 为了实际处理每个请求,libevent 库提供一种事件机制...

    李海彬

扫码关注云+社区

领取腾讯云代金券