vue学习笔记(三)

在一个 Vue.js 项目中，实现点击加号将物品加入购物车，并在购物车页面显示加入购物车的物品，可以通过以下几个步骤和原理来实现：

1. 组件结构

假设我们有两个主要组件：

• ProductList：显示产品列表和加号按钮。
• ShoppingCart：显示购物车中的物品。

2. 状态管理

为了在不同组件间共享购物车数据，我们通常使用 Vuex（Vue.js 的状态管理库）来集中管理应用的状态。Vuex 允许我们在不同组件之间共享状态，并响应状态变化。

3. 实现步骤

1. 安装和配置 Vuex

首先，安装 Vuex 并进行基本配置：

npm install vuex --save

在 store.js 中创建 Vuex 存储：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cart: [],
  },
  mutations: {
    ADD_TO_CART(state, product) {
      state.cart.push(product);
    },
  },
  actions: {
    addToCart({ commit }, product) {
      commit("ADD_TO_CART", product);
    },
  },
  getters: {
    cartItems: (state) => state.cart,
  },
});

2. 在主文件中注册 Vuex

在 main.js 中导入并使用 Vuex 存储：

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

new Vue({
  store,
  render: (h) => h(App),
}).$mount("#app");

3. 更新 ProductList 组件

在 ProductList.vue 中，当点击加号按钮时，调用 Vuex 的 action 来将物品添加到购物车：

<template>
  <div>
    <div v-for="product in products" :key="product.id">
      <p>{{ product.name }}</p>
      <button @click="addToCart(product)">加号</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品 1' },
        { id: 2, name: '商品 2' },
        // 其他商品
      ]
    };
  },
  methods: