vue中刷新页面后如何获取cookie值并放入Vuex store

Posted 2023-02-16

【中文标题】vue中刷新页面后如何获取cookie值并放入Vuex store

【英文标题】：How to get the cookie value and put it into the Vuex store after refreshing page in vue

【发布时间】：2021-12-09 00:06:27

【问题描述】：

我有一个产品组件，我有一个我正在将产品添加到购物车：

addToCart: function () 
            this.amount = this.itemsCount !== "" ? this.itemsCount : 1;
            if(this.variationId != null) 
                this.warningMessage = false;
                    cartHelper.addToCart(this.product.id, this.variationId, parseInt(this.amount), (response) => 
                        this.$store.dispatch('addProductToCart', 
                            cart: response.data,
                        )
                    );
             else 
                this.warningMessage = true;
            
        ,

而且我也有购物车助手，我在其中进行 API 调用并将 cart_guid 存储在 cookie 中：

let cartHelper = 
    cartCookieName: "_cart",
    cookieValue: "",

    getCart: function (callback = undefined) 
        return apiHelper.getRequest(
            "/carts",
            (response) => 
                document.cookie = `$this.cartCookieName=$response.data.attributes.cart_guid;`;
                this.cookieValue = response.data.attributes.cart_guid;
                if (callback)  callback(response); 
            
        )
    ,

    addToCart: function (product, variation_id, amount, callback = undefined) 
        if(this.cookieValue == "") 
            this.getCart(() => 
                this._addToCart(product, variation_id, amount, callback);
            );
         else 
            this._addToCart(product, variation_id, amount, callback)
        
    ,

    _addToCart(product, variation_id, amount, callback = undefined) 
        return apiHelper.postRequest(
            `/carts/$this.cookieValue/add-item`,
            (response) => 
                document.cookie = `$this.cartCookieName=$response.data.attributes.cart_guid;`;
                if (callback)  callback(response); 
            ,
            
                product_id: product,
                variation_id: variation_id,
                amount: amount,
            
        )
    ,
   
export default cartHelper;

（我没有写我在cookie中存储cart_guid的代码。我认为没有必要，它基本上是cookieValue） 因此，当我将产品添加到购物车时，我会将这些数据存储在 Vuex 中。为此我的行动：

export const addProductToCart = (commit, cart) => 
    commit('ADD_TO_CART', cart);

我的突变：

export const ADD_TO_CART = (state, cart) => 
    state.cart = cart;

和我的状态：

export default 
    cart: 
        "attributes": 
            "items": [],
        
    

当我刷新页面时，我正在尝试做什么，Vuex 中的值丢失了，但由于仍然有一个值为 cart_guid 的 cookie，我基本上应该进行此调用并用 cart_guid 再次填充 Vuex。但是我对 Vuex 还很陌生，所以我不知道应该把逻辑放在哪里。如果您能给我任何提示或代码，我将非常高兴。

【参考方案1】：

有一个 onMounted 生命周期，只要 vue 组件成功挂载到 DOM 上，里面的代码就会运行。你可以把你的函数放在它检索你的cookie值的地方，这样它就会在挂载后。