如何在vue中填充状态项

Posted 2023-02-16

【中文标题】如何在vue中填充状态项

【英文标题】：How to fill items of the state in vue

【发布时间】：2021-12-11 20:53:07

【问题描述】：

我有一个带有 id 的购物车，当我使用 cart_guid (carts/70290ee4-258b-11cb-9ca4-42ca64dfa778) 拨打电话时，json：

    "data": 
        "type": "carts",
        "id": "70290ee4-258b-11cb-9ca4-42ca64dfa778",
        "attributes": 
            "cart_guid": "70290ee4-258b-11cb-9ca4-42ca64dfa778",
            "total_price_excl_vat": 70,
            "total_vat": 66.5,
            "total_price_incl_vat": 136.5,
            "items": [
                
                    "id": 300,
                    "cart_id": 663,
                    "product_id": "2021-05-07.1.1",
                    "product_name": "Product",
                    "product_short_description": "short description",
                    "product_image": "img",
                    "variation_id": 1,
                    "variation_name": "child",
                    "price_excl_vat": 10,
                    "vat_percentage": 0.95,
                    "amount": 7,
                    "created_at": "2021-10-26T11:29:31.000000Z",
                    "updated_at": "2021-10-26T11:30:02.000000Z"
                
            ],
            "createdAt": "2021-10-26T11:29:09.000000Z",
            "updatedAt": "2021-10-26T11:30:02.000000Z"
        
    

所以当我刷新页面时，项目又是空的，我真的很困惑如何填充它们。 所以我的状态：

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

变异：

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

和行动：

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

顺便说一句，当我点击添加到购物车按钮时，我可以填充项目，逻辑在这里：

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

我真的很困惑如何实现它，我知道很多代码，但希望你能帮助我。最后，在这里我尝试检查是否有cookieValue（即cart_guis）调用了购物车：

checkCart: function(callback = undefined) 
        if(this.cookieValue != null) 
            this.getCart((response) => 
                if (callback)  callback(response); 

                console.log("cookie var")
            );
         
    ,

在我的 index.vue 中，我正在尝试安装它：

mounted() 
        cartHelper.checkCart((response) => 
            if(response.data.attributes.item == null) 
                this.$store.dispatch('addProductToCart', 
                    cart: response.data,
                )
            
        );
    ,

【问题讨论】：

什么是cookieValue？似乎 cartHelper.checkCart 方法没有在mounted() 中运行，因为这个检查没有通过if(this.cookieValue != null)

cookieValue === cart_guid，当我刷新页面时它会通过，因为它仍然存在

所以，response.data.attributes.item == null 检查也通过了，this.$store.dispatch 在mounted() 中运行，对吗？

是的，我添加了一张图片，这就是我得到的。但问题是即使我使用 cart_guid 进行调用，项目也是空的，应该像顶部的 json 一样。所以我无法填满商店

@magicbean 你的问题解决了吗？

【参考方案1】：

我正在使用vuex-persistedstate，我认为这是一个不错的选择，您可以找到它here。 据说vuex-persistedstate会

在页面重新加载之间保持并补充您的 Vuex 状态。

您的数据将在浏览器的本地存储中，然后您可以简单地使用它。我将在下面提供示例。

突变：

export const addToCart = (state, response) => 
  const findingItem = state.cart.findIndex(item => item.id === response.id);

  if (findingItem === -1) 
    state.cart.push(response);
  
;

(为了避免重复项。)

index.js :（存储配置）

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

import module1 from './module1';

Vue.use(Vuex);

const Store = new Vuex.Store(
  modules: 
    module1,
  ,

  plugins: [createPersistedState()],
 
);

export default Store;

addToCart 函数：

  this.$store.commit('module1/addToBag', item, 
      module: 'module1',
    );

展示包：

created() 
    this.cart = this.$store.state.module1.cart;
  ,

ps：我使用了模块化的存储方式。