vuex案例之购物车数据本地存储

本地存储,当刷新页面时,数据保留在购物车中;

每次在mutations中操作,都要将更新的数据保存在本地

window.localStorage.setItem('cartlist',JSON.stringify(state.cartlist))

此处保存的是一个数组,数组中包含对象,类似:

cartlist:[
{id:1,num:1,price:10,name:'aaa'},
{id:2,num:1,price:10,name:'aaa1'},
{id:3,num:1,price:10,name:'aaa2'}
]

如果保存时,不用JSON.stringify,会本地存储为:

 会报错

 刷新后取得数据为:用JSON.parse取

cartlist: JSON.parse(window.localStorage.getItem('cartlist'))||[],//购物车库

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在手机端使用 Vuex 管理购物是很常见的做法。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以帮助我们在应用中集中管理和共享状态。 在手机端购物中,通常我们需要以下功能: 1. 添加商品到购物:用户点击加入购物按钮,将商品信息添加到 Vuex购物状态中。 2. 修改购物商品数量:用户可以增加或减少购物中商品的数量,这会触发 Vuex购物状态的更新。 3. 删除购物商品:用户可以移除购物中的商品,这同样会触发 Vuex购物状态的更新。 4. 清空购物:用户可以一键清空购物,将购物状态重置为空。 在 Vuex 中,我们可以定义一个名为 `cart` 的模块,用于管理购物相关的状态和操作。例如,我们可以定义以下状态和操作: ```javascript const cart = { state: { products: [] // 购物中的商品列表 }, mutations: { addToCart(state, product) { state.products.push(product); }, removeFromCart(state, productId) { state.products = state.products.filter(p => p.id !== productId); }, clearCart(state) { state.products = []; } }, actions: { addProductToCart({ commit }, product) { commit('addToCart', product); }, removeProductFromCart({ commit }, productId) { commit('removeFromCart', productId); }, clearCart({ commit }) { commit('clearCart'); } }, getters: { cartSize: state => state.products.length } }; ``` 然后,在你的 Vue 组件中,你可以使用这些操作来处理购物的逻辑。例如: ```javascript import { mapActions, mapGetters } from 'vuex'; export default { computed: { ...mapGetters('cart', ['cartSize']) }, methods: { ...mapActions('cart', ['addProductToCart', 'removeProductFromCart', 'clearCart']), addToCart(product) { this.addProductToCart(product); }, removeFromCart(productId) { this.removeProductFromCart(productId); }, clearCart() { this.clearCart(); } } }; ``` 这样,你就可以在手机端通过 Vuex 来管理购物了。当用户进行各种购物操作时,状态会得到更新,并及时反映在用户界面上。希望能对你有所帮助!如有更多问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值