成都网站seo技术,哈尔滨网站优化,成都家装公司,深圳市交易中心一、项目截图 二、主要知识点
vuex的使用json-server的使用json-server --watch index.json三、需要注意的点
json-server 安装成功#xff0c;查看版本直接报错。安装默认版本埋下的一个坑#xff0c;和node版本不匹配作者直接安装vuex#xff0c;默认安装也是版本不匹配…一、项目截图 二、主要知识点
vuex的使用json-server的使用json-server --watch index.json三、需要注意的点
json-server 安装成功查看版本直接报错。安装默认版本埋下的一个坑和node版本不匹配作者直接安装vuex默认安装也是版本不匹配启动没报错但是没法使用。作者是vue2版本使用的vuex3.1.1版本安装的时候指定版本就好了
四、Main.js
import Vue from vue
import App from ./App.vue
import store from ./storeVue.config.productionTip falsenew Vue({store,render: h h(App)
}).$mount(#app)五、App.vue
templatediv classapp-container!-- Header 区域 --cart-header/cart-header!-- 商品 Item 项组件 --cart-item v-foritem in list :keyitem.id :itemitem/cart-item!-- Foote 区域 --cart-footer/cart-footer/div
/templatescript
import CartHeader from /components/cart-header.vue
import CartFooter from /components/cart-footer.vue
import CartItem from /components/cart-item.vue
import {mapState} from vuex;export default {name: App,components: {CartHeader,CartFooter,CartItem},computed:{...mapState(cart,[list])},created() {this.$store.dispatch(cart/getList)}
}
/scriptstyle langless scoped
.app-container {padding: 50px 0;font-size: 14px;
}
/style
六、components
cart-footer.vue
templatediv classfooter-container!-- 中间的合计 --divspan共 {{total}} 件商品合计/spanspan classprice{{ totalPrice}}/span/div!-- 右侧结算按钮 --button classbtn btn-success btn-settle结算/button/div
/templatescript
import {mapGetters} from vuexexport default {name: CartFooter,computed: {...mapGetters(cart, [total, totalPrice])}
}
/scriptstyle langless scoped
.footer-container {background-color: white;height: 50px;border-top: 1px solid #f8f8f8;display: flex;justify-content: flex-end;align-items: center;padding: 0 10px;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 999;
}.price {color: red;font-size: 13px;font-weight: bold;margin-right: 10px;
}.btn-settle {height: 30px;min-width: 80px;margin-right: 20px;border-radius: 20px;background: #42b983;border: none;color: white;
}
/style
cart-header.vue
templatediv classheader-container购物车案例/div
/templatescript
export default {name: CartHeader
}
/scriptstyle langless scoped
.header-container {height: 50px;line-height: 50px;font-size: 16px;background-color: #42b983;text-align: center;color: white;position: fixed;top: 0;left: 0;width: 100%;z-index: 999;
}
/style
cart-item.vue
templatediv classgoods-container!-- 左侧图片区域 --div classleftimg :srcitem.thumb classavatar alt/div!-- 右侧商品区域 --div classright!-- 标题 --div classtitle{{ item.name }}/divdiv classinfo!-- 单价 --span classprice{{ item.price }}/spandiv classbtns!-- 按钮区域 --button classbtn btn-light clickbtnClick(-1)-/buttonspan classcount{{ item.count }}/spanbutton classbtn btn-light clickbtnClick(1)/button/div/div/div/div
/templatescript
export default {name: CartItem,props: {item: {type: Object,request: true}},methods: {btnClick(step) {const newCount this.item.count step;const id this.item.id;if (newCount 1) return;this.$store.dispatch(cart/updateCountAsync, {id,newCount})}}
}
/scriptstyle langless scoped
.goods-container {display: flex;padding: 10px; .goods-container {border-top: 1px solid #f8f8f8;}.left {.avatar {width: 100px;height: 100px;}margin-right: 10px;}.right {display: flex;flex-direction: column;justify-content: space-between;flex: 1;.title {font-weight: bold;}.info {display: flex;justify-content: space-between;align-items: center;.price {color: red;font-weight: bold;}.btns {.count {display: inline-block;width: 30px;text-align: center;}}}}
}.custom-control-label::before,
.custom-control-label::after {top: 3.6rem;
}
/style
七、store
index.js
import Vue from vue
import Vuex from vuex
import cart from ./modules/cart;Vue.use(Vuex)export default new Vuex.Store({modules: {cart}
})
modules/cart.js
import axios from axios;export default {namespaced: true,state() {return {//购物车数据list: []}},mutations: {updateList(state, newList) {state.list newList}},actions: {async getList(context) {const res await axios.get(http://localhost:3000/cart)context.commit(updateList, res.data)},async updateCountAsync(context, obj) {await axios.patch(http://localhost:3000/cart/${obj.id}, {count: obj.newCount})//当前的this指向$storethis.dispatch(cart/getList)}},getters: {//商品总数total(state) {return state.list.reduce((sum, item) sum item.count, 0);},//商品总价totalPrice(state) {return state.list.reduce((sum, item) sum item.count * item.price, 0);}}
}
