移动端购物车数据重新编译后数据消失

object not found

已于 2022-08-16 09:55:41 修改

阅读量1.8w

点赞数 1

分类专栏： javascript uniapp 文章标签： javascript 前端 vue.js

于 2022-08-09 15:56:56 首次发布

本文链接：https://blog.csdn.net/qq_45547094/article/details/126249186

版权

javascript 同时被 2 个专栏收录

51 篇文章 1 订阅

订阅专栏

uniapp

6 篇文章 0 订阅

订阅专栏

废话不多说直接上解决办法，代码如下

思路：使用uni.setStorageSync（官方提供的方法）将购物车的数据存储在本地，然后在项目初始化后让其重新读取本地存储的数据

csdn文章推荐受影响测试文字行数大于10字数大于10的解决方法

// 购物车的store模块，用来进行全局共享数据
// 初始化vuex模块
export default {
	// 为当前模块开启命名空间
	namespaced: true,
	// 模块的store数据
	// 购物车的数组，用来存储购物车中每个商品的信息对象，并且每个对象包含如下6个属性
	// {goods_id, goods_name,goods_price,goods_count,goods_samll_logo,goods_state}
	state: () => ({
		// 项目初始化时读取存储的数据,没有存的话就默认空数组字符串,然后将其转换成数组
		cart: JSON.parse(uni.getStorageSync('cart') || '[]'),
	}),
	// 模块的mutation方法(用于修改state里的数据)
	mutations: {
		// goods是为了判断数据是否已经存在于state里面
		addToCart(state, goods) {
			console.log(goods);
			// 根据提交的商品id判断是否已经存在于购物车，如果不存在则findResult为undefined否则就是已存在
			const findResult = state.cart.find((x) => x.goods_id === goods.goods_id)
			console.log(findResult);
			if (!findResult) {
				state.cart.push(goods)

			} else {
				findResult.goods_count++
			}
			// 修改数据后调通过commit方法使用m_cart模块所提供的方法saveToStorage()将数据用具存储到本地
			this.commit('m_cart/saveToStorage')
			console.log(state.cart);
		},
		// 将数据永久存储到本地
		saveToStorage(state) {
			// uni.setStorageSync官方方法
			uni.setStorageSync('cart', JSON.stringify(state.cart))
		}
	},
	// 模块的getters属性(相当于数据的包装器)
	getters: {
		// 计算商品总数量
		total(state) {
			let count = 0
			//对cart数组进行遍历,x就代表每一件商品,然后把商品的数量累加到count身上
			state.cart.forEach(x => count += x.goods_count)
			return count
		}
	}

}

csdn文章推荐受影响测试文字行数大于10字数大于10的解决方法