Vuex购物车数据状态管理

Vuex购物车数据状态管理

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，这里的状态在一定程度上可以理解成数据状态。Vuex可以理解成一个可以供获取和修改的公共共享数据仓库。

引用VUEX

import Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({})

挂载

var vm = new Vue({
	el: '#app',
	render: c => c(app),
	router,
	store
}) 

import Vuex from 'vuex'
Vue.use(Vuex)
var car = JSON.parse(localStorage.getItem('car') || '[]')
var store = new Vuex.Store({
	state: {
		car: car
	},
	mutations: {
		addToCar(state, goodsinfo){
			var flag = false;
			state.car.some(item => {
				if (item.id == goodsinfo.id) {
					item.count += parseInt(goodsinfo.count)
					flag = true
					return true
				}
			})
			if (!flag) {
				state.car.push(goodsinfo)
			}
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		updateGoodsInfo(state, goodsinfo){
			state.car.some(item => {
				if (item.id == goodsinfo.id) {
					item.count = parseInt(goodsinfo)
				}
			})
			localStorage.setItem('car', JSON.stringify(state,car))
		},
		removeFormCar(state, id){
			state.car.some((item, i) => {
				if (item == id) {
					state.car.splice(i, 1)
					return true;
				}
			})
		},
		updateGoodsSelected(state, info){
			state.car.some(item => {
				if (item.id == info.id) {
					item.selected = info.selected
				}
			})
			localStorage.setItem('car', JSON.stringify(state,car))
		}
	},
	getters: {
		getAllCount(state){
			var c = 0;
			state.car.forEach(item => {
				c += item.count
			})
			return c
		},
		getGoodsCount(state){
			var o = {}
			state.car.forEach(item => {
				o[item.id] = item.count
			})
			return
		},
		getGoodsSelected(state){
			var o = {}
			state.car.forEach(item => {
				o[item.id] = item.selected
			})
			return o
		},
		getGoodsCountAndAmount(state){
			var o = {
				count: 0,
				amount: 0
			}
			state.car.forEach(item => {
				if (item.selected) {
					o.count += item.count;
					amount += item.price * item.count
				}
			})
			return o 
		}
	}
})

<template>
	<div class="shopcar-container">
		<div class="goods-list">
			<div class="mui-card" v-for="item in goodslist" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="$store.getters.getGoodsSelected[item.id]" @change="selectedChanged(item.id, $store.getters.getGoodsSelected[item.id])"></mt-switch>
						<img :src="item.thumb_path">
						<div class="info">
							<h1>{{ item.title }}</h1>
							<p>
								<span class="price">￥{{ item.sell_price }}</span>
								<numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
								<a href="#" @click.prevent="remove(item.id, i)">删除</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner jiesuan">
					<div class="left">
						<p>总计(不含运费)</p>
						<p>已勾选商品<span class="red">{{ $store.getters.getGoodsCountAndAmount.count }}</span>件，总价<span class="red">￥{{ $store.getters.getGoodsCountAndAmount.amount }}</span></p>
					</div>
				</div>
				<mt-button type="danger">去结算</mt-button>
			</div>
		</div>
		<p>{{ $store.getters.getGoodsSelected }}</p>
	</div>
</template>

<script>
	import numbox from '../subcomponents/shopcar_numbox.vue'

	export default {
		data(){
			return {
				goodslist: []
			}
		}，
		created(){
			this.getGoodsList();
		},
		methods:{
			getGoodsList(){
				var idArr = [];
				this.$store.state.car.forEach(item => idArr.push(item.id));
				if (idArr.length <= 0) {
					return
				}
				this.$http.get('数据接口' + idArr.join(",")).then(result =>{
					if (result.body.status === 0) {
						this.goodslist = result.body.message
					}
				});
			},
			remove(id, index){
				this.goodslist.splice(index, 1);
				this.$store.commit('removeFormCar')
			},
			selectedChanged(id, val){
				this.$store.commit('updateGoodsSelected', { id, selected: val })
			}
		},
		components:[
			numbox
		]
	}
</script>

<style lang="scss" scoped>
	.shopcar-container{
		background-color: #eee;
		overflow: hidden;
		.goods-list{
			.mui-card-content-inner{
				display: flex;
				align-items: center;
			}
			img{
				width: 60px;
				height: 60px;
			}
			h1{
				font-size: 14px;
			}
			.info{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.price{
					color: red;
					font-weight: bold;
				}
			}
		}
		.jiesuan{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.red{
				color: red;
			}
		}	
	}
</style>

关键点

1. 缓存存取

var car = JSON.parse(localStorage.getItem('car') || '[]')

。。。

localStorage.setItem('car', JSON.stringify(state.car))

2. state即状态
   说人话就是储存数据状态的存储区域

state: {
		car: car
	},

3. mutations即改变
   也就是修改state的方法集

addToCar(state, goodsinfo){
			var flag = false;
			state.car.some(item => {
				if (item.id == goodsinfo.id) {
					item.count += parseInt(goodsinfo.count)
					flag = true
					return true
				}
			})
			if (!flag) {
				state.car.push(goodsinfo)
			}
			localStorage.setItem('car', JSON.stringify(state.car))
		}
}

4. getters即获取者
   也就是用于获取state的方法集

getters: {
		getAllCount(state){
			var c = 0;
			state.car.forEach(item => {
				c += item.count
			})
			return c
		}
}

5. $store对象
   可以用\$store.getters使用getters
   可以用this.$store.commit()使用mutations
   可以用this.$store.state.car直接访问