Vue书店
1.案例所用技术
vue-cli脚手架;
vue-router路由管理;
vuex2.0状态管理;
iview视图;
2.能有什么收获
初步熟悉
vue-cli
手交架;初步学会处理
vue-router
路由管理,状态管理的内容,以及用iview
简单布局;
3.书店的功能需求
主导航是
首页
、书单
、以及图书管理
;图书管理包含
添加图书
、修改图书
和删除图书
;效果如下图:
4.功能实现
-
(1)安装
vue-cli
a:
npm install -g vue-cli
(只用安装一次,以后直接从b开始);b:
vue init webpack my-project
(my-project
是文件名);c:
cd my-project
(进入文件夹);d:
npm install
(安装依赖);e:
npm run dev
(启动服务);
我们实现简单的操作逻辑所用的操作集中在src目录下
-
(2)组件
Home
首页组件List
书单组件Manger
图书管理Delete
删除组件Add
增加组件Update
修改组件
-
(3)
vue-router
路由管理-
为了方便路由管理,我们将用这样的结构来描述路由
import Vue from 'vue' //引入vue import Router from 'vue-router' //引入vue-router import Home from '../components/Home.vue' //引入各个组件 import List from '../components/List.vue' import Add from '../components/Add.vue' import Manger from '../components/Manger.vue' import Detail from '../components/Detail.vue' import Update from '../components/Update.vue' import Delete from '../components/Delete.vue' Vue.use(Router); //在vue中使用vue-router const routes = [ //定义路由 {path:'/home', //主路由 component:Home}, //组件 {path:'/list', component:List}, {path:'/manger', component:Manger, children:[ //子路由 {path:'add', component:Add}, {path:'update', component:Update}, {path:'delete', component:Delete}]}, { path:'/detail/:id', //子路由动态绑定 name:'detail', //子路由名 component:Detail}] export default new Router({ //导出路由 routes})
-
-
(4)vuex状态管理
-
getters
getters
的作用参见Vue值理解Getters,在这里getters
的作用就是拿到store
仓库里面存放的bookInfo
书单。export const books =state => state.bookInfo //导出
-
types
export const BOOK_ADD = 'BOOK_ADD' export const BOOK_DELETE = 'BOOK_DELETE' export const BOOK_UPDATE = 'BOOK_UPDATE'
-
mutations
mutations
的作用就是用来操作state
里面的数据,而且在vuex
里面只有在mutations
里面才能操作state
里面的数据,详情参考Vuex之理解Mutations。import {BOOK_ADD, BOOK_DELETE,BOOK_UPDATE} from './types' //引入types const mutations ={ //定义mutations [BOOK_ADD](state,book){ //增加图书方法 if(state.bookInfo.length == 0){ book.id=1 }else{ book.id= state.bookInfo[state.bookInfo.length-1].id+1 } state.bookInfo.push(book) //其实就是store里面的state里面的bookInfo增加一本书 }, [BOOK_DELETE](state,bid){ //删除图书的方法 state.bookInfo=state.bookInfo.filter(item=>{ //通过id删掉bookInfo里面指定的图书 return item.id != bid }) }, [BOOK_UPDATE](state,book){//更新图书的方法 state.bookInfo.map(item=>{ if(item.id == book.id){ return book}})}} export defalut mutaions
-
actions
actions
是用来提交mutations
里面的方法的,而且可以异步操作。详情见Vuex之理解Actions。import {BOOK_ADD, BOOK_DELETE,BOOK_UPDATE} from './types' const actions ={ addBook:({commit},book)=>commit('BOOK_ADD',book), deleteBook:({commit},id)=>commit('BOOK_DELETE',id), updateBook:({commit},book)=>commit('BOOK_UPDATE',book),} export default actions
-
index
定义state,就是定义状态,也就是数据,详情见Vuex之理解state。import Vue from 'vue' import Vuex from 'vuex' import * as getters from './getters' //引入getters import actions from './actions' //引入actions import mutations from './mutations' //引入mutations Vue.use(Vuex) const state ={ bookInfo:[{ id:1, bookName:'Vue权威指南', imgUrl:'http://i-3.391k.com/2016/9/21/b2235ffb-4fbd-427e-b49f-3b60f1af4492.png', price:12}, {id:2, bookName:'Vue实践揭秘', imgUrl:'http://img5.imgtn.bdimg.com/it/u=2842506561,1290810338&fm=11&gp=0.jpg', price:12}] } export default new Vuex.Store({//导出store state, getters, mutations, actions})
-
-
(5)
main.js
主文件import Vue from 'vue' import App from './App' import iview from 'iview' //引入iview import router from './router/index' import 'iview/dist/styles/iview.css'//引入iview的css文件 import store from './store'//引入store状态管理 Vue.config.productionTip = false Vue.use(iview) new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
-
(6)组件代码
这里用删除组件举例<template> <div class="listContainer"> <Col span="5" offset="1" v-for="(book ,index)in books" :key="index" class="text"> //v-for循环拿到每本书,注意key,不然会警告 <Card > <p slot="title">{{book.bookName}}</p> <img class="bookimg" :src="book.imgUrl" alt=""> <p>售价:{{book.price}}</p> <Icon type="close-round"></Icon> <Button type="error" @click="deleteBook(book.id)">删除</Button> //点击时触发删除函数,将要删除的图书id传过去 </Card> </Col> </div> </template> <script> import { mapGetters } from 'vuex' export default{ name: 'Home', computed:{ ...mapGetters({//拿到getters里面的函数 books:'books' }) }, methods:{ deleteBook(id){ this.$store.dispatch('deleteBook',id) //用dispatch方法触发actions里面deleteBook函数,并传入id } } } </script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。