1. Simulate shopping cart function
Create a store/cart. Js
export default {
state:{
cartlist: []
},
getters: {
},
actions: {
},
mutations: {
}
}
2. Add the module to the status manager
import Vue from ‘vue’
import Vuex from ‘vuex’
import cart from ‘./cart.js’
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
cart
}
})
export default store
3. Script.js in cart component
import {mapState} from ‘vuex’
export default {
computed: {
. mapState({
‘cartlist’: ({cart}) => cart.cartlist
})
}
}
4. Request shopping cart data in store/cart.js
export default {
state:{
cartlist: []
},
getters: {
},
actions: {
getCartlist ({commit}) {
cartapi.getCartlist((data) => {commit(‘changeCartlist’, data)})
}
},
mutations: {
}
}
Implement the request data method API /cart.js
import axios from ‘axios’
export default {
getCartlist (cb) {
// axios requests data and successfully calls the callback cb —- to simulate data
var data = [
{id:1,name:’pro1′,num:1,price:10},
{id:2,name:’pro2′,num:2,price:20},
{id:3,name:’pro3′,num:3,price:30},
{id:4,name:’pro4′,num:4,price:40}
]
cb(data)
}
}
6, implement the submission of mutation changes cartList —-store/cart.js
export default {
state:{
cartlist: []
},
getters: {
},
actions: {
getCartlist ({commit}) {
cartapi.getCartlist((data) => {commit(‘changeCartlist’, data)})
}
},
mutations: {
changeCartlist (state, data) {
state.cartlist = data
},
}
}
7. Trigger request data —-cart component to distribute action—-script.js
import {mapState} from ‘vuex’
export default {
computed: {
. mapState({
‘cartlist’: ({cart}) => cart.cartlist
})
},
mounted () {
this.$store.dispatch(‘getCartlist’)
}
}
8. Calculate the total quantity and price of the goods
8.1 Added the option getters to store/cart.js
export default {
state:{
cartlist: []
},
getters: {
totalCount(state){
let totalNum = 0
let totalPrice = 0
state.cartlist.filter((item) => {
totalNum += item.num * 1
totalPrice += item.num * item.price
})
return {
totalNum,
totalPrice
}
}
},
actions: {
getCartlist ({commit}) {
cartapi.getCartlist((data) => {commit(‘changeCartlist’, data)})
}
},
mutations: {
changeCartlist (state, data) {
state.cartlist = data
},
}
}
8.2 Index. vue in the CART component can be used
8.2.1 Get Getters directly from store
< div > total: {{this. $store. Getters. TotalCount. TotalNum}} < / div >
The < div > total: {{this. $store. Getters. TotalCount. TotalPrice}} < / div
Use mapGetters helper functions to reduce the amount of code
script.js
import {mapState,mapGetters} from ‘vuex’
export default {
computed: {
. mapState({
‘cartlist’: ({cart}) => cart.cartlist
}),
mapGetters([‘totalCount’])
},
mounted () {
this.$store.dispatch(‘getCartlist’)
}
}
index.vue
< div > total: {{totalCount. TotalNum}} < / div >
The < div > total: {{totalCount. TotalPrice}} < / div
9. Select goods to calculate price and quantity
9.1 the index. The vue layout
<template>
<div>
<ul>
<li v-for='(item, index) in cartlist’ :key=”item.id”>
<input type=’checkbox’ v-model=’item.flag’ />
{{ item.name}} —- {{item.num}} —- {{item.price}} –
</li>
</ul>
< div > total: {{totalCount. TotalNum}} < / div >
The < div > total: {{totalCount. TotalPrice}} < / div >
</div>
</template>
<script src=’./script.js’></script>
<style src=”./style.scss”></style>
9.2 Modify the source data API /cart.js
import axios from ‘axios’
export default {
getCartlist (cb) {
// axios requests data and successfully calls the callback cb —- to simulate data
var data = [
{id:1,name:’pro1′,num:1,price:10},
{id:2,name:’pro2′,num:2,price:20},
{id:3,name:’pro3′,num:3,price:30},
{id:4,name:’pro4′,num:4,price:40}
]
data.map((item) => {
item.flag = false
})
cb(data)
}
}
10, achieve full selection and reverse selection function
10.1 the index. The vue layout
<template>
<div>
<input type=’checkbox’ @change=”selectFn(cartList)” V-model =’allSelected’ />
<ul>
<li v-for='(item, index) in cartlist’ :key=”item.id”>
<input type=’checkbox’ v-model=’item.flag’ />
{{ item.name}} —- {{item.num}} —- {{item.price}} –
</li>
</ul>
< div > total: {{totalCount. TotalNum}} < / div >
The < div > total: {{totalCount. TotalPrice}} < / div >
</div>
</template>
<script src=’./script.js’></script>
<style src=”./style.scss”></style>
10.2 Store /cart.js added new initial value allSelected
export default {
state:{
Cartlist: [].
AllSelected: false
},
getters: {
totalCount(state){
let totalNum = 0
let totalPrice = 0
state.cartlist.filter((item) => {
totalNum += item.num * 1
totalPrice += item.num * item.price
})
return {
totalNum,
totalPrice
}
}
},
actions: {
getCartlist ({commit}) {
cartapi.getCartlist((data) => {commit(‘changeCartlist’, data)})
}
},
mutations: {
changeCartlist (state, data) {
state.cartlist = data
},
}
}
10.3 Add all selected events to the CART component
//index.vue
<input type=’checkbox’ @change=”selectFn(cartList)” V-model =’allSelected’ />
// methods in script.js
selectFn (cartlist) {
This. codestore.com MIT (‘changeAllSelect’) // Toggle true and false
// Request the value immediately after changing the data in store
If (this. $store. State. Cart. AllSelected) {/ / if it is true, all said to be selected
Const flag = true // Flag is true
This.$store.dispatch(‘getAllSelectCartlist’, {cartList, flag}) // Set all elements to true in action
}else{
const flag = false
this.$store.dispatch(‘getAllSelectCartlist’, {cartlist, flag} )
}
},
10.4 Implement changeAllSelect mutation and getAllSelectCartlist action
store/cart.js
export default {
state:{
Cartlist: [].
AllSelected: false
},
getters: {
totalCount(state){
let totalNum = 0
let totalPrice = 0
state.cartlist.filter((item) => {
totalNum += item.num * 1
totalPrice += item.num * item.price
})
return {
totalNum,
totalPrice
}
}
},
actions: {
getCartlist ({commit}) {
cartapi.getCartlist((data) => {commit(‘changeCartlist’, data)})
},
getAllSelectCartlist ({commit}, {cartlist, flag}) {
cartlist.map((item) => {
item.flag = flag
})
commit(‘changeCartlist’, cartlist)
},
},
mutations: {
changeCartlist (state, data) {
state.cartlist = data
},
changeAllSelect (state) {
state.allSelected = ! state.allSelected
},
}
}
11. Click the list to select all and reverse
<ul>
<li v-for='(item, index) in cartlist’ :key=”item.id”>
<input type=’checkbox’ @change=’selectItem(cartlist, item, index)’ v-model=’item.flag’ />
. {{item name}}, {{item. Num}} – {{item. Price}} – < button @ click = “called deleteItem (cartlist, index)” > delete < / button >
</li>
</ul>
script.js
selectItem (cartlist, item, index) {
if(item.flag){
const flag = true
this.$store.dispatch(‘selectItem’, {cartlist, index, flag}) // cartlist[index].flag = flag
}else {
const flag = false
this.$store.dispatch(‘selectItem’, {cartlist, index, flag})
}
// console.log(“cartlist”,this.$store.state.cart.cartlist)
var cartlist = this.$store.state.cart.cartlist
This.$store.dispatch(‘checkItem’, cartList
}
Implement Action selectItem and checkItem Store /cart.js
export default {
state:{
Cartlist: [].
AllSelected: false
},
getters: {
totalCount(state){
let totalNum = 0
let totalPrice = 0
state.cartlist.filter((item) => {
totalNum += item.num * 1
totalPrice += item.num * item.price
})
return {
totalNum,
totalPrice
}
}
},
actions: {
getCartlist ({commit}) {
cartapi.getCartlist((data) => {commit(‘changeCartlist’, data)})
},
getAllSelectCartlist ({commit}, {cartlist, flag}) {
cartlist.map((item) => {
item.flag = flag
})
commit(‘changeCartlist’, cartlist)
},
selectItem ({commit}, {cartlist, index, flag}) {
cartlist[index].flag = flag
commit(‘changeCartlist’, cartlist)
},
checkItem ({commit}, cartlist){
let all = true
cartlist.map((item) => {
if(! item.flag) {
all = false
}
})
commit(‘checkCartlist’, all)
}
},
mutations: {
changeCartlist (state, data) {
state.cartlist = data
},
changeAllSelect (state) {
state.allSelected = ! state.allSelected
},
}
}
Realize the mutation checkCartlist
export default {
state:{
Cartlist: [].
AllSelected: false
},
getters: {
totalCount(state){
let totalNum = 0
let totalPrice = 0
state.cartlist.filter((item) => {
totalNum += item.num * 1
totalPrice += item.num * item.price
})
return {
totalNum,
totalPrice
}
}
},
actions: {
getCartlist ({commit}) {
cartapi.getCartlist((data) => {commit(‘changeCartlist’, data)})
},
getAllSelectCartlist ({commit}, {cartlist, flag}) {
cartlist.map((item) => {
item.flag = flag
})
commit(‘changeCartlist’, cartlist)
},
selectItem ({commit}, {cartlist, index, flag}) {
cartlist[index].flag = flag
commit(‘changeCartlist’, cartlist)
},
checkItem ({commit}, cartlist){
let all = true
cartlist.map((item) => {
if(! item.flag) {
all = false
}
})
commit(‘checkCartlist’, all)
}
},
mutations: {
changeCartlist (state, data) {
state.cartlist = data
},
changeAllSelect (state) {
state.allSelected = ! state.allSelected
},
checkCartlist (state, data) {
state.allSelected = data
}
}
}
12. Delete operations
<ul>
<li v-for='(item, index) in cartlist’ :key=”item.id”>
<input type=’checkbox’ @change=’selectItem(cartlist, item, index)’ v-model=’item.flag’ />
. {{item name}}, {{item. Num}} – {{item. Price}} – < button @ click = “called deleteItem (cartlist, index)” > delete < / button >
</li>
</ul>
deleteItem (cartlist, index) {
this.$store.dispatch(‘deleteItem’, {cartlist, index})
},
store/cart.js
export default {
state:{
Cartlist: [].
AllSelected: false
},
getters: {
totalCount(state){
let totalNum = 0
let totalPrice = 0
state.cartlist.filter((item) => {
totalNum += item.num * 1
totalPrice += item.num * item.price
})
return {
totalNum,
totalPrice
}
}
},
actions: {
getCartlist ({commit}) {
cartapi.getCartlist((data) => {commit(‘changeCartlist’, data)})
},
getAllSelectCartlist ({commit}, {cartlist, flag}) {
cartlist.map((item) => {
item.flag = flag
})
commit(‘changeCartlist’, cartlist)
},
selectItem ({commit}, {cartlist, index, flag}) {
cartlist[index].flag = flag
commit(‘changeCartlist’, cartlist)
},
checkItem ({commit}, cartlist){
let all = true
cartlist.map((item) => {
if(! item.flag) {
all = false
}
})
commit(‘checkCartlist’, all)
},
deleteItem ({commit}, {cartlist, index}) {
cartapi.deleteItem({cartlist, index}, (data) => {commit(‘changeCartlist’, data)})
},
},
mutations: {
changeCartlist (state, data) {
state.cartlist = data
},
changeAllSelect (state) {
state.allSelected = ! state.allSelected
},
checkCartlist (state, data) {
state.allSelected = data
}
}
}
api/cart.js
import axios from ‘axios’
export default {
getCartlist (cb) {
// axios requests data and successfully calls the callback cb —- to simulate data
var data = [
{id:1,name:’pro1′,num:1,price:10},
{id:2,name:’pro2′,num:2,price:20},
{id:3,name:’pro3′,num:3,price:30},
{id:4,name:’pro4′,num:4,price:40}
]
data.map((item) => {
item.flag = false
})
cb(data)
},
deleteItem ({cartlist, index}, cb) {
cartlist.splice(index, 1)
cb(cartlist)
}
}