Vuex2.0 + Vue-Resource Todo实例

前言：

• 主要应用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、如果喜欢请点个赞吧，接下来会继续分享。希望喜欢前端的朋友来纠错改正，一块学习。（抱拳）