即使在使用 vuex 刷新后如何将项目保留在购物车中

Question

我面临的问题是-

刷新页面后我的状态变空了
我注销然后登录时发生同样的情况

我是 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>

我想知道我应该添加什么来保留登录用户的数据

Answer 1

为什么您希望它持久保存数据？您没有使用任何类型的数据库来存储数据。

Answer 2

使用 vuex 插件 vuex-persist。您可以使用它来将数据保存到本地存储或 cookie，同时使用 vuex

的所有很棒的东西

Answer 3

我想出了如何坚持购物车。应该在推车突变中调用保存突变

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
};

即使在使用 vuex 刷新后如何将项目保留在购物车中

How to keep items in cart even after refresh using vuex

vue.js

vuex

cart

shopping-cart