一般我们用到vuex的典型例子在电商app购物车部分 假设我们点击一个商品 看他的详情 并加入购物车， 那么我们在这三个部分就需要用到这个商品的数据，我们给他叫goodlist,那么我们使用vuex传递数据就很方便，但是同时我们也会发现一个问题，那就是一刷新我们的数据就会消失，这是要解决这个问题除了插件以外，还有一个东西，就是存储，我们要把state里的数据给他存到存储里面这是我们就需要用到一个方法 mutations（mutations是改变state数据的唯一途径 ），我们在给state赋值的同时，把值给存到存储里面，然后给state的默认值为存储里的数据,当然我们要判断一下存储里面有没有那个值,有的话转为JSON.parse，没有的话就返回空数组【】，使用三目运算符
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export const store= new Vuex.Store({
state:{
goodsList:localStorage["goodsList"]?JSON.parse(localStorage["goodsList"]): []
},
getters:{
sum:state=>{
var total=0;
state.goodsList.forEach((item)=>{
if(item.select){
total+=item.price*item.number
}
})
return total
},
goddsNumber:state=>{
return state.goodsList.length
}
},
mutations:{
addGoods:(state,data)=>{
state.goodsList.push(data);
localStorage.setItem("goodsList",JSON.stringify(state.goodsList));
},
deleteGoods(state,index){
state.goodsList.splice(index,1);
localStorage.setItem("goodsList",JSON.stringify(state.goodsList));
},
updateGoods(state,data){
const {index,key,value}=data;
state.goodsList[index][key]=value;
localStorage.setItem("goodsList",JSON.stringify(state.goodsList));
}
}
})
car.vue
<template>
<div class="car-list-container">
<ul>
<li class="car-list" v-for="(v,i) in goodsList">
<div class="car-list__img">
<img :src="v.url">
</div>
<div class="car-list__detail">
<p class="car-list__detail__title">{{v.title}}</p>
<p class="car-list__detail__number">数量：<button class="number--decrease iconfont icon- jianhao" @click="changeNumber(v.id,-1)"></button><input type="text" readonly="" v-model="v.number"> <button class="number--increase iconfont icon-iconfont7" @click="changeNumber(v.id,1)"></button></p>
<p class="car-list__detail__type">规格：<span>{{v.stock}}</span></p>
<p class="car-list__detail__price">单价：<span>￥{{v.price}}</span></p>
<p class="car-list__detail__sum">小计：<span>￥{{v.price*v.number}}</span></p>
</div>
<div class="car-list__operate">
<span class="iconfont icon-shanchu delete-goods" @click="del(v.id)"></span>
<label >
<input type="checkbox" name="goods" :checked="v.select==true" @change="toggleSelect(v.id)">
<span></span>
</label>
</div>
</li>
</ul>
<div class="car-foot-nav">
<button class="sum-price">总额：￥{{sum}}</button>
<router-link :to='{name:"index"}' class="continue-shopping" tag="button">继续购物</router-link>
<button class="to-pay">去结算</button>
</div>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
import { mapGetters } from 'vuex'
export default {
name: 'car',
data () {
return {
}
},
methods:{
...mapMutations(
["deleteGoods","updateGoods"]
),
findPosition(id){
return this.goodsList.findIndex(item=>{
return item.id==id
})
},
changeNumber(id,val){
var i=this.findPosition(id);
var number=this.goodsList[i].number;
this.updateGoods({
index:i,
key:"number",
value:number+val<=0?1:number+val
})
},
del(id){
var i=this.findPosition(id);
this.deleteGoods(i);
},
toggleSelect(id){
var i=this.findPosition(id);
var select=this.goodsList[i].select;
this.updateGoods({
index:i,
key:"select",
value:!select
})
}
},
computed:{
...mapGetters(
[ "sum"]
),
goodsList(){
return this.$store.state.goodsList
}
},
mounted(){
this.$ajax.get("/api/car",function(res){
console.log(res)
})
}
};
</script>