前言：
- 主要應用vue2.1，vuex2.1結合vue-Resource做一個Todos實例。
- 后臺用mock-data模擬后臺數(shù)據(jù)
- 源碼地址
先來看一下效果圖：
效果圖
第一步 先來起個項目
打開控制臺輸入：
$ npm install --global vue-cli（如果之前安裝過就不用安裝了）
#創(chuàng)建一個自己的基于webpack的心項目
$ vue init webpack my-project(這里是你自己的工程名)
$ cd my-project(進到你的工程文件夾下)
$ npm install (安裝依賴)
$ npm run dev
注意：起工程的時候回讓你選擇ESLint,Test等等各種測試，這里都默認選no就可以。
控制臺中的內容
然后在控制臺中輸入
npm run dev至此，你的項目應該跑起來了，效果應該是這樣的。
偉大的vue.js
第二步 安裝mock-data 以及vuex
mock-data,用來模擬后臺接口。
關于mock-data更多內容請點擊這里
打開控制臺，直接用npm安裝即可，
npm install json-server --global
然后配置一下mock-data。在項目文件中創(chuàng)建mock-data.json文件夾。
現(xiàn)在的項目目錄是這樣的。
目前的工程目錄
第三步 安裝vuex
直接打開控制臺
npm install vuex --save
提示：為了方便理解，這里的vuex直接寫到一個store.js文件中，就不分開來寫了。
順便把vue-Resource也安裝一下，因為接下來我們要用到vue-Resource與后天進行數(shù)據(jù)交互。
同樣打開控制臺輸入npm i vue-resource -S
讓它先安裝著，為了節(jié)省時間，先來寫咱們的View界面。
在components文件夾下創(chuàng)建一個Todo.vue 文件。
Todo.vue文件
data中的todoTitle 綁定到上面的input框中，以便咱們輸入向后臺傳入的數(shù)據(jù)。
接下來是vuex中的內容，
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
todos: []//注意這里前面咱們定義的todos是一個數(shù)組，所以這里的state中todos是數(shù)組的形式
}
const mutations = {
addTodo (state,todo) {
state.todos.push(todo)
//view層中的methods提交的是todo,所以這里mutations中也以todo來處理數(shù)據(jù)。
},
delTodo (state, { todo }) {
state.todos.splice(state.todos.indexOf(todo),1)
//注意這里的splice函數(shù)，這個是JavaScript數(shù)組中輸出元素的一個函數(shù)，詳情點擊[這里](http://www.w3school.com.cn/jsref/jsref_splice.asp)
}
}
export default new Vuex.Store({
state,
mutations
})
接下來是main.js的內容了。
import Vue from 'vue'
import store from './vuex/store'
import Todo from './components/Todo'
import VueResource from 'vue-resource'
Vue.use(Vue-Resource)
new Vue({
store,//在main.js 中注冊一下store所有的組件都可以直接引用了。
el: '#app',
render: h=> h(Todo)
})
至此，完整的Todo實例做完了。
總結難點（需要多加注意的點）：
1、刪除元素，splice函數(shù)那一點糾結了好久。
2、引入vue-resource時，與vuex結合時，要弄清楚向mutations中提交的是什么內容
源碼請點擊GitHub動動鼠標點個Star吧，感謝。
3、如果喜歡請點個贊吧，接下來會繼續(xù)分享。希望喜歡前端的朋友來糾錯改正，一塊學習。（抱拳）
