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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 和头脑对话,像对着朋友聊天那样,你可以为自己解决一切障碍。 障碍其实并不来自外在,主要在于我们相信了头脑的话语。 ...
    花叽阅读 1,270评论 11 19
  • 走到人生的四十年,我经历了一种新的体验,当面试考官。 话说这面试考官可不是这么容易当的。首先,你需要是专业技术人才...
    朱朱01阅读 505评论 0 1