Vuex2.0 + Vue-Resource Todo实例

作者: Dalin大林 | 来源:发表于2017-02-26 19:44 被阅读1703次

前言:

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

相关文章

  • Vuex2.0 + Vue-Resource Todo实例

    前言: 主要应用vue2.1,vuex2.1结合vue-Resource做一个Todos实例。 后台用mock-d...

  • GoogleSamples MVP 中文文档 README

    todo-mvp 这个版本的应用叫做todo-mvp , 并为项目中的其他实例提供依据。这个实例旨在: 在不使用任...

  • Retrofit接口实例

    一、接口实例 二、TODO 1、Part、 PartMap、MultilPart用法实例2、Streaming用法...

  • Mahout | kmeans算法

    kmeans canopy算法 [TODO: canopy原理] mahout kmeans参数 实例 /usr/...

  • Axios的基本使用

    axios使用 作为全局对象来使用,不像vue-resource挂在在Vue实例上。 引入 npm install...

  • Vuex 进阶,创建一个笔记本项目

    教程开始 让我们通过这个例子,来理解 Vuex2.0 给我们带来的便利,之前在研究 Vuex2.0 的时候也是踩了...

  • vue-resource用法记录

    基础语法 引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用htt...

  • vue01

    vue复习: vue-resource他会将一个$http属性挂载vm上 $http是定义在vue的原型上,实例上...

  • 使用vue-resource库发送请求获取数据

    数据获取 vue-resource vue-resource axios 单来说,vue-resource就像jQ...

  • 初识vuex

    vuex2.0 基本使用--- mutation 和 action http://www.cnblogs.com/...

网友评论

    本文标题:Vuex2.0 + Vue-Resource Todo实例

    本文链接:https://www.haomeiwen.com/subject/krfawttx.html