如何在vue中刷新页面后获取cookie值并将其放入Vuex存储

Question

我有一个产品组件，我有一个我正在向购物车中添加产品:

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的代码。我不认为这是必要的，它基本上是。因此，当我将产品添加到购物车中时，我将这些数据存储在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，所以我不知道我应该把逻辑放在哪里。如果你给我任何提示或代码，我将非常高兴。

Answer 1

有一个onMounted生命周期，其中的代码将在vue组件成功挂载到DOM时运行。你可以把你的函数放在取回cookie值的地方这样它就会挂载。