如何解决如何使用vuex刷新后如何将商品保留在购物车中
我面临的问题是-
- 刷新页面时状态为空
- 注销并再次登录时发生相同的情况
我是vuex的新手,我想为我的电子商务网站构建一个运行正常的购物车。
我的购物车商店如下(ps。我只是做了一个非常简单的轮廓来检查它是否按要求工作):
let dayCare = window.localStorage.getItem('dayCare');
const state = {
dayCare: dayCare ? JSON.parse(dayCare) : [],};
const getters = {
dayCareItems (state){
return state.dayCare
}
};
const actions = {
dayCareCart({commit},dayCare){
let data = dayCare
commit('pushDaycareToCart',data)
return data
commit('saveCart')
},};
const mutations = {
pushDaycareToCart(state,data){
return state.dayCare.push(data)
},saveCart(state) {
window.localStorage.setItem('dayCare',JSON.stringify(state.dayCare));
}
};
export default {
state,actions,mutations,getters
};
我的购物车数据来自:
<button type="submit" @click="dayCareCart(cartData)">Add To Cart</button>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
methods: {
...mapActions(["dayCareCart"]),}
}
</script>
我想知道我应该添加些什么来保留登录用户的数据
解决方法
您为什么希望它保留数据?您没有使用任何类型的数据库来存储数据。
,使用vuex插件vuex-persist。您可以使用它将数据持久保存到本地存储或cookie,同时使用所有很棒的功能vuex
,我弄清楚了如何固定购物车。保存突变应称为“推购物车”突变
let dayCare = window.localStorage.getItem('dayCare');
const state = {
dayCare: dayCare ? JSON.parse(dayCare) :[],};
const getters = {
dayCareItems (state){
return state.dayCare
}
};
const actions = {
dayCareCart({commit},dayCare){
commit('pushDaycareToCart',dayCare)
},};
const mutations = {
pushDaycareToCart(state,dayCare){
state.dayCare.push(dayCare)
this.commit('saveCart')
},saveCart(state) {
window.localStorage.setItem('dayCare',JSON.stringify(state.dayCare));
},};
export default {
state,actions,mutations,getters
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。