vuex构建笔记本应用学习

Posted 2020-08-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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对象中的数据进行组件数据的回显了。