使用 Vue.js 2 + Vuex 创建 Notes App

Vuex 是什么？

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Here is a vuex store definition:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
  },
  actions: {
  },
  mutations: {
  },
  getters: {
  },  
  modules: {  
  }
})

export default store

There are 5 objects that make up a store：

• state:
  This is where you define the data structure of your application. You can also set default or initial state here.

• actions:
  Actions are where you define the calls that will commit changes to your store. A common example of this would be a call to an api to retrieve data, once it completes you call store.commit() to invoke a mutation to actually update the data in the store. Actions are called in your components via dispatch call.

• mutations:
  The mutations calls are the only place that the store can be updated.

• getters:
  Getters are a way to grab computed data from the store.

• modules:
  The modules object provides a way to split your store in multiple stores, but allow them to all remain part of the store tree. As your application grows this is a good way to organize your codebase.

更多详情参看 中文文档

几点说明：

• 数据是单向流动的
• 组件可以调用 actions
• actions 用来调度/提交 mutations
• 只有 mutations 可以修改 state，组件不能也不应该直接修改 state
• 无论 state 何时更新，组件都将反映这些变化

开始项目

项目结构

初始化项目

vue init webpack vuex-notes-app
cd vuex-notes-app
npm install

npm install vuex --save

npm run dev

创建 Vuex Store

// store.js

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) {
    if (state.notes.length > 0) {
      state.notes.splice(state.notes.indexOf(state.activeNote), 1)
      state.activeNote = state.notes[0]
    }
  },
  TOGGLE_FAVORITE(state) {
    if (state.activeNote) {
      state.activeNote.favorite = !state.activeNote.favorite
    }
  },
  SET_ACTIVE_NOTE(state, note) {
    state.activeNote = note
  }
}

const getters = {
  activeNoteText: state => {
    if (state.activeNote) {
      return state.activeNote.text
    }
  },
  activeNoteFavorite: state => {
    if (state.activeNote) {
      return state.activeNote.favorite
    }
  },
}

const actions = {
  addNote({ commit }) {
    commit('ADD_NOTE')
  },
  editNote({ commit }, e) {
    commit('EDIT_NOTE', e.target.value)
  },
  deleteNote({ commit }) {
    commit('DELETE_NOTE')
  },
  updateActiveNote({ commit }, note) {
    commit('SET_ACTIVE_NOTE', note)
  },
  toggleFavorite({ commit }) {
    commit('TOGGLE_FAVORITE')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

导入

// main.js
// import the store and add it to the root vue object

import Vue from 'vue'
import App from './App'
import store from './vuex/store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '',
  components: {
    App
  },
  store,
})

Toolbar.vue

NotesList.vue

Editor.vue

App.vue

styles.css

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300);

html, #app {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  max-height: 100%;
  position: relative;
}

#toolbar {
  float: left;
  width: 80px;
  height: 100%;
  background-color: #30414D;
  color: #767676;
  padding: 35px 25px 25px 25px;
}

#notes-list {
  float: left;
  width: 300px;
  height: 100%;
  background-color: #F5F5F5;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
}

#list-header {
  padding: 5px 25px 25px 25px;
}

#list-header h2 {
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
  font-size: 22px;
  padding-bottom: 8px;
}

#notes-list .container {
  height: calc(100% - 137px);
    max-height: calc(100% - 137px);
    overflow: auto;
  width: 100%;
  padding: 0;
}

#notes-list .container .list-group-item {
  border: 0;
  border-radius: 0;
}

.list-group-item-heading {
  font-weight: 300;
  font-size: 15px;
}

#note-editor {
  height: 100%;
  margin-left: 380px;
}

#note-editor textarea {
  height: 100%;
  border: 0;
  border-radius: 0;
}

#toolbar i {
  font-size: 30px;
  margin-bottom: 35px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.5s ease;
}

#toolbar i:hover {
  opacity: 1;
}

.starred {
  color: #F7AE4F;
}

index.html

效果截图