关于小程序数据缓存的问题：
使用cart:uni.getStorageSync('cart')去读取缓存。使用uni.setStorageSync('cart', JSON.stringify(state.cart))去存储数据，
发现读出来的数据和存储的数据不一样？
起因是我通过点击多选框，去改变cart数组里面某一项（数组里的每一项都是一个对象）里的goods_state的值，
改变了之后就存储起来。
代码（这里把无关紧要的代码删了没有贴出来）：
vue文件:
import {
mapState,
mapActions,
mapGetters
} from 'vuex'
export default {
data() {
return {
};
},
methods: {
...mapActions('m_cart', ['addToCart', 'removeToCart',"saveToStorage"]),
radioChangeHandler(item){
item.goods_state=!item.goods_state;
this.saveToStorage(item);
},
},
computed: {
// 将 m_cart 模块中的 cart 数组映射到当前页面中使用
...mapState('m_cart', ['cart']),
...mapGetters('m_cart', ['totalPrice',"checkedCount","total"]),
}
}
store里的.js文件：
export default {
namespaced: true,
state: () => ({
// 每个对象，都包含如下 6 个属性：
// { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
cart: JSON.parse(uni.getStorageSync('cart') || '[]'),
defaultPic: "https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png"
}),
actions: {
saveToStorage(context, value) {
console.log(value,"saveToStorage");
context.commit("SAVETOSTORAGE", value);
}
},
mutations: {
SAVETOSTORAGE(state) {
console.log(state.cart,"SAVETOSTORAGE");
uni.setStorageSync('cart', JSON.stringify(state.cart))
console.log(state.cart,"SAVETOSTORAGE2");
}
},
}
初始状态：
goods_state的值为true，多选框被勾选。
当我点击多选框，去改变goods_state的值的时候，
我们可以看到cart数组里的第一项的goods_state也成功被改变了变成了false，同时多选框也没有选上。
控制台查看本地存储storeage的结果:
也没有问题，goods_state也是false。
然后我重新编译，因为cart数组是通过uni.getStorageSync('cart')去读取缓存的，所以我想理应的结果是保存上图的状态，多选框没有被选上，而且goods_state的值为false。
但是结果是：
多选框被选上了，查看appData里cart里goods_state也是true，但是好神奇的就是我再次查看缓存storage，
发现里面的cart数组里的goods_state是false，这是为什么？我cart数据就是从缓存里读出来的吗？为什么两边的数据不一样
我怎么才能达到我想要的效果？
感觉问题有点神奇，使用我在下面贴出完整代码，如看上述代码已有结论请忽略下述代码。
vue文件：
<template>
<view>
<view class="" v-if="cart.length !== 0">
<myAddress/>
<view class="shopIcons">
<uni-icons type="shop-filled" size="30" class="iconsImage"></uni-icons>
<text class="iconsText">购物车</text>
</view>
<view class="shopGoods">
<view class="shopGoodItem" v-for="(item,index) in cart" :key="index">
<view class="goods-item-left">
<radio-group >
<radio :checked="item.goods_state" color="#C00000" @click="radioChangeHandler(item)"></radio>
</radio-group>
<image class="goods-pic" :src="item.goods_small_logo || defaultPic"></image>
</view>
<view class="goods-item-right">
<view class="goods-info-box">
<view class="goods-name">
{{item.goods_name}}
</view>
<view class="goods-price">￥{{item.goods_price}}</view>
<uni-number-box :min="1" class="numBox" @change="(value) => changeToCart(value,item,index)"
:value="item.goods_count"></uni-number-box>
</view>
</view>
</view>
</view>
<view class="bottomArea">
<view class="allRadio">
<radio :checked="allRadioSelect" color="#C00000" @click="allRadioChangeHandler">全选</radio>
</view>
<view class="totalPrice">
<text>合计:</text>
<text>￥{{totalPrice}}</text>
</view>
<button type="warn" class="orderButton">结算</button>
</view>
</view>
<view class="empty-cart" v-else>
<image src="/static/cart_empty@2x.png" class="empty-img"></image>
<text class="tip-text">空空如也~</text>
</view>
</view>
</template>
<script>
import {
mapState,
mapActions,
mapGetters
} from 'vuex'
import badgeMix from '../../mixins/tabbar-badge.js'
export default {
mixins: [badgeMix],
data() {
return {
};
},
methods: {
...mapActions('m_cart', ['addToCart', 'removeToCart',"saveToStorage"]),
changeToCart(value, item, index) {
console.log(value, item, index);
console.log(value, this.$store.state.m_cart.cart[index].goods_count, item, index);
if (value > this.$store.state.m_cart.cart[index].goods_count) {
this.addToCart(item)
} else {
this.removeToCart(item);
}
},
radioChangeHandler(item){
item.goods_state=!item.goods_state;
this.saveToStorage(item);
},
allRadioChangeHandler(){
this.cart.forEach((e,index,array)=>{
e.goods_state=!e.goods_state;
})
},
goToMyAddress(){
uni.navigateTo({
url:"/subpkg/myAddress/myAddress"
})
}
},
onShow() {
console.log(this.checkedCount,"!!!");
this.setBadge();
},
computed: {
// 将 m_cart 模块中的 cart 数组映射到当前页面中使用
...mapState('m_cart', ['cart']),
...mapGetters('m_cart', ['totalPrice',"checkedCount","total"]),
allRadioSelect(){
let flag=true
this.cart.forEach((element, index, array)=>{
if(!element.goods_state){
flag=false;
}
}
)
return flag;
// return this.total === this.checkedCount
},
},
}
</script>
export default {
namespaced: true,
state: () => ({
cart: JSON.parse(uni.getStorageSync('cart') || '[]'),
defaultPic: "https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png"
}),
actions: {
addToCart(context, value) {
context.commit("ADDTOCART", value);
},
removeToCart(context,val){
context.commit("REMOVETOCART",val);
},
saveToStorage(context, value) {
console.log(value,"saveToStorage");
context.commit("SAVETOSTORAGE", value);
}
},
mutations: {
ADDTOCART(state, value) {
const findResult = state.cart.find((x) => x.goods_id === value.goods_id);
console.log(findResult);
if (findResult) {
findResult.goods_count++;
} else {
state.cart.push(value)
}
uni.$showMsg("成功加入购物车！")
this.commit('m_cart/SAVETOSTORAGE')
},
REMOVETOCART(state,val){
const findResult=state.cart.find((x)=>x.goods_id===val.goods_id)
console.log(findResult,val,"@@");
if(findResult.goods_count>=1){
findResult.goods_count--;
}else{
state.cart=state.cart.filter(item => item != findResult);
}
this.commit('m_cart/SAVETOSTORAGE')
},
SAVETOSTORAGE(state) {
console.log(state.cart,"SAVETOSTORAGE");
uni.setStorageSync('cart', JSON.stringify(state.cart))
console.log(state.cart,"SAVETOSTORAGE2");
}
},
getters: {
total(state) {
let c = 0
state.cart.forEach(goods => c += goods.goods_count)
return c
},
totalPrice(state){
const totalPrice=state.cart.reduce((prev,cur,index,arr)=>{
return cur.goods_count*cur.goods_price + prev;
},0)
console.log(totalPrice);
return totalPrice;
},
checkedCount(state){
let c=0;
state.cart.forEach(goods =>{
if(goods.goods_state=true){
c++;
}
})
return c;
}
},
}
