Question

当客户增加或减少Vue js中的库存时，如何使组件之间获得总购物车的结果？

在这种情况下，我有3个组成部分

一个是//main// case 'W': if(save(array, len) == 0); { printf("Data saved.\n"); } break; case 'O': if(getRawData(array, len)); { printf("File read.\n"); } break;，带有图标购物车 /我正在使用模式广告。
int save(struct student *h, int num_students) { char name[20]; printf("Enter file name: " ); scanf("%s", name); // Read in filename FILE *output = fopen(name, "w"); // open the file to write if (!output) { return -1; // error } for (int i = 0; i < num_students; ++i) { fprintf(output, "%s %s %s \n", h[i].f_name, h[i].s_name, h[i].ID); for(int j = 0; j < MAXROUNDS; j++) { fprintf(output, "%d\n", h[i].points[j]); } printf("Information of student %s %s (%s) written into file %s\n", h[i].s_name, h[i].f_name, h[i].ID, name); } fclose(output); // close return 0; } int getRawData(struct student *records) { int i; int nmemb; // amount of structs char name[20]; printf("Name of the file to be opened: \n"); scanf("%s", name); FILE *outtput = fopen(name, "r"); int ch=0; int lines=0; if (outtput == NULL); return 0; lines++; while(!feof(outtput)) { ch = fgetc(outtput); if(ch == '\n') { lines++; } } nmemb = lines / 7; for(i = 0; i < nmemb; i++) { fscanf(outtput, "%s %s %s", records[i].f_name, records[i].s_name, records[i].ID); for(int j = 0; j < MAXROUNDS; j++) { fscanf(outtput, "%d\n", &records[i].points[j]); } } printf("%d", lines); return i; }用于添加到购物车，
和header/navbar.vue也已添加到购物车

我已经能够在shop.vue中添加购物车并将其添加到数据库，但是当客户扣留库存时，以及当客户多次添加到购物车时，我不知道如何与他们进行沟通我做的项目是一个接一个喜欢当客户添加购物车item1，然后在1个购物车购物篮上显示商品1时，客户再次将带有库存1的商品1添加到购物车中，它将也添加到购物车中，它不会使商品成为{{1 }}，我不知道如何自动将它们变成这样这是我的一些代码

shop.vue

并在我的页眉/导航栏/上查找购物车，我从服务器上获取数据，以将用户ID购物车推到购物车图标上我正在起诉MongoDB，用于服务器和数据库的Mongoose 在这种情况下，是否有任何简单的示例可以使组件之间的通信获得报酬并发送数据？

Answer 1

您可能考虑从Thinking in React创建一个公共所有者组件，以在这些组件之间共享状态：

对于应用程序中的每个状态：

·确定基于该状态呈现内容的每个组件。

·查找一个公共所有者组件（在需要层次结构中状态的所有组件之上的单个组件）。

·共同所有者或层次结构中更高级别的其他组件都应拥有   状态。

·如果找不到合适的组件，请拥有   状态，创建一个仅用于保存状态的新组件并添加它

在您的情况下，您的组件可以嵌套在一个公共所有者组件下：

Container.vue/
│
├── Navbar.vue /
│
├── Shop.vue /
│
├── Detail.vue /

如果您在Shop.vue中更新cartItem，则可以使用emit

更新结果

我创建了一个codesandbox来重复您的问题。

以下是链接：https://codesandbox.io/s/132v86qm4q

希望我能解决您的问题！

如何实现组件之间的总购物车计算通信？

1 个答案: