脚本宝典收集整理的这篇文章主要介绍了vue-cli+vue-router+vuex+iview书店案例(简单易学),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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>
以上是脚本宝典为你收集整理的vue-cli+vue-router+vuex+iview书店案例(简单易学)全部内容,希望文章能够帮你解决vue-cli+vue-router+vuex+iview书店案例(简单易学)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。