前言：
- 主要应用vue2.1，vuex2.1结合vue-Resource做一个Todos实例。
- 后台用mock-data模拟后台数据
- 源码地址
先来看一下效果图：
效果图
第一步 先来起个项目
打开控制台输入：
$ npm install --global vue-cli（如果之前安装过就不用安装了）
#创建一个自己的基于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。在项目文件中创建mock-data.json文件夹。
现在的项目目录是这样的。
目前的工程目录
第三步 安装vuex
直接打开控制台
npm install vuex --save
提示：为了方便理解，这里的vuex直接写到一个store.js文件中，就不分开来写了。
顺便把vue-Resource也安装一下，因为接下来我们要用到vue-Resource与后天进行数据交互。
同样打开控制台输入npm i vue-resource -S
让它先安装着，为了节省时间，先来写咱们的View界面。
在components文件夹下创建一个Todo.vue 文件。
Todo.vue文件
data中的todoTitle 绑定到上面的input框中，以便咱们输入向后台传入的数据。
接下来是vuex中的内容，
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
todos: []//注意这里前面咱们定义的todos是一个数组，所以这里的state中todos是数组的形式
}
const mutations = {
addTodo (state,todo) {
state.todos.push(todo)
//view层中的methods提交的是todo,所以这里mutations中也以todo来处理数据。
},
delTodo (state, { todo }) {
state.todos.splice(state.todos.indexOf(todo),1)
//注意这里的splice函数，这个是JavaScript数组中输出元素的一个函数，详情点击[这里](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函数那一点纠结了好久。
2、引入vue-resource时，与vuex结合时，要弄清楚向mutations中提交的是什么内容
源码请点击GitHub动动鼠标点个Star吧，感谢。
3、如果喜欢请点个赞吧，接下来会继续分享。希望喜欢前端的朋友来纠错改正，一块学习。（抱拳）
网友评论