vuex demo 购物车
vuex 五大核心概念
核心概念
基本目录
components组件实现：
App.vue
<template>
<div id="app">
<Title></Title>
<product-list></product-list>
<shopping-cart></shopping-cart>
</div>
</template>
<script>
import Title from '@/components/title'
import ProductList from '@/components/ProductList'
import ShoppingCart from '@/components/ShoppingCart'
export default {
name: 'App',
components: {
Title, ProductList, ShoppingCart
}
}
</script>
<style>
</style>
title.vue
<template>
<div class="title">
<h1 class="title-word">Shopping-Cart</h1>
</div>
</template>
<style scoped lang="stylus" rel="stylesheet/stylus">
.title
color: red
.title-word
text-align: center
</style>
<script>
export default {
}
</script>
ProductList.vue
<template>
<div class="ShoppingList">
<h2 class="title">shoppingcheck</h2>
<div class="Shop">
<ul>
<li v-for="(product,index) in productss" :key="index">
<span>{{product.title}}</span>
<span>- ${{ product.price }}</span>
<span>x {{ product.num }}</span>
</li>
</ul>
<p>Total ${{totalprice}}</p>
<br>
<p>checkout <button @click="checkoutall">checkout</button></p>
</div>
</div>
</template>
<style scoped lang="stylus" ref="stylesheet/stylus">
.ShoppingList
text-align: center
.title
text-align: center
.Shop
width: 500px
height: 400px
margin-left: 10%
margin-right: 10%
</style>
<script>
import {mapGetters, mapActions} from 'vuex'
export default {
computed: {
...mapGetters({
productss: 'cartProducts',
totalprice: 'totalPrice'
})
},
methods: {
...mapActions({
checkoutall: 'checkoutall'
})
}
}
</script>
ShoppingCart.vue
<template>
<div class="ShoppingList">
<h2 class="title">shoppingcheck</h2>
<div class="Shop">
<ul>
<li v-for="(product,index) in productss" :key="index">
<span>{{product.title}}</span>
<span>- ${{ product.price }}</span>
<span>x {{ product.num }}</span>
</li>
</ul>
<p>Total ${{totalprice}}</p>
<br>
<p>checkout <button @click="checkoutall">checkout</button></p>
</div>
</div>
</template>
<style scoped lang="stylus" ref="stylesheet/stylus">
.ShoppingList
text-align: center
.title
text-align: center
.Shop
width: 500px
height: 400px
margin-left: 10%
margin-right: 10%
</style>
<script>
import {mapGetters, mapActions} from 'vuex'
export default {
computed: {
...mapGetters({
productss: 'cartProducts',
totalprice: 'totalPrice'
})
},
methods: {
...mapActions({
checkoutall: 'checkoutall'
})
}
}
</script>
入口：
import Vue from 'vue'
import Vuex from 'vuex'
import carts from './modules/carts'
import products from './modules/products'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
carts,
products
},
strict: process.env.NODE_ENV !== 'production'
})
核心代码：
carts.js
const state = {
items: []
}
const getters = {
cartProducts: (state, getters, rootState) => {
return state.items.map(({ id, num }) => {
const product = rootState.products.products.find(product => product.id === id)
return {
title: product.title,
price: product.price,
num
}
})
},
totalPrice: (state, getters) => {
return getters.cartProducts.reduce((total, product) => {
return total + product.price * product.num
}, 0)
}
}
const mutations = {
addproducttobag (state, { id }) {
state.items.push({
id,
num: 1
})
},
increaseitem (state, { id }) {
const carItem = state.items.find(item => item.id === id)
carItem.num++
},
clear (state) {
state.items = []
}
}
const actions = {
addtobag ({ commit, state }, product) {
if (product.inventory > 0) { // 库存不为空
const carItem = state.items.find(item => item.id === product.id)
if (!carItem) {
commit('addproducttobag', {id: product.id})
} else {
commit('increaseitem', carItem)
}
}
commit('decreaseproductnum', {id: product.id})
},
checkoutall ({commit, state}) {
commit('clear')
}
}
export default {
state,
getters,
mutations,
actions
}
product.js
const state = {
products: [
{ id: 1, title: 'iPad 4 Mini', price: 500.01, inventory: 2 },
{ id: 2, title: 'H&M T-Shirt White', price: 10.99, inventory: 10 },
{ id: 3, title: 'Charli XCX - Sucker CD', price: 19.99, inventory: 5 }
]
}
const getters = {
}
const mutations = {
decreaseproductnum (state, { id }) {
const productsitem = state.products.find(product => product.id === id)
productsitem.inventory--
}
}
const actions = {
}
export default {
state,
getters,
mutations,
actions
}
1.state 类似于data 的作用。
2.getters 派生出数据，用state里面的数据进行变化，再传递出去。
3.actions 异步操作
4.mutations 同步操作
5.modules 相关模版
注意：1.main.js里面import store from './store'
是因为'./store'的默认路径为 ‘./store/index.js’
2.注意不要将 getters,actions,mutaions,的s遗落，免得会识别不了。
3.action做相关异步操作再通过commit发送出去到mutations
4.当需要调用到其他模版的状态时，rootState可以很好的帮助到你。