从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（四）

npm install vuex

// src/store/index.jsimport Vue from 'vue';import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({  strict: true,  state: {    // bought items    cart: [],    // ajax loader    showLoader: false,    // selected product    product: {},    // all products    products: [      {        name: '1',      }    ],    // all manufacturers    manufacturers: [],  }})

// src/main.js// ...
import App from './App';import router from './router';import store from './store';
Vue.config.productionTip = false;Vue.component('ValidationProvider', ValidationProvider); // ...new Vue({  el: '#app',  router,  store,  components: { App },  template: '<App/>',});

<template><div>  {{ obj1.obj2.obj3.a + obj1.obj4.b }}</div></template><script>export default {  data: {    obj1: {      obj2: {        obj3: {          a        }      },      obj4: {        b      }    }  }}</script>

<template><div>  {{ addResult }}</div></template>
<script>export default {  data: {    obj1: {      obj2: {        obj3: {          a        }      },      obj4: {        b      }    }  },  computed: {    addResult() {      return this.obj1.obj2.obj3.a + this.obj1.obj4.b    }  }}</script>

<!-- src/pages/admin/Products.vue --><!-- ... -->    <div class="title">      <h1>This is Admin</h1>    </div>    <div class="body">      {{ product.name }}    </div>  </div></template>
<script>export default {  computed: {    product() {      return this.$store.state.products[0];    }  }}</script>

ACTION_NAME(state, payload) {  // 对 `state` 进行操作以返回新的 `state`  return newState;}

// src/store/index.js// ...    // all products    products: [      {        _id: '1',        name: 'iPhone',        description: 'iPhone是美国苹果公司研发的智能手机系列，搭载苹果公司研发的iOS操作系统',        image: 'https://i.gadgets360cdn.com/large/iPhone11_leak_1567592422045.jpg',        price: 2000,        manufacturer: 'Apple Inc'      },      {        _id: '2',        name: '荣耀20',        description: '李现同款 4800万超广角AI四摄 3200W美颜自拍 麒麟Kirin980全网通版8GB+128GB 蓝水翡翠 全面屏手机',        image: 'https://article-fd.zol-img.com.cn/t_s640x2000/g4/M08/0E/0E/ChMlzF2myueILMN_AAGSPzoz23wAAYJ3QADttsAAZJX090.jpg',        price: 2499,        manufacturer: '华为'      },      {        _id: '3',        name: 'MIX2S',        description: '骁龙845 全面屏NFC 游戏智能拍照手机 白色 全网通 6+128',        image: 'http://himg2.huanqiu.com/attachment2010/2018/0129/08/39/20180129083933823.jpg',        price: 1688,        manufacturer: '小米'      },      {        _id: '4',        name: 'IQOO Pro',        description: '12GB+128GB 竞速黑 高通骁龙855Plus手机 4800万AI三摄 44W超快闪充 5G全网通手机',        image: 'https://www.tabletowo.pl/wp-content/uploads/2019/08/vivo-iqoo-pro-5g-blue-1.jpg',        price: 4098,        manufacturer: 'Vivo'      },      {        _id: '5',        name: 'Reno2',        description: '【12期免息1年碎屏险】4800万变焦四摄8+128G防抖6.5英寸全面屏新 深海夜光(8GB+128GB) 官方标配',        image: 'https://news.maxabout.com/wp-content/uploads/2019/08/OPPO-Reno-2-1.jpg',        price: 2999,        manufacturer: 'OPPO'      }    ],    // all manufacturers    manufacturers: [],  },  mutations: {    ADD_TO_CART(state, payload) {      const { product } = payload;      state.cart.push(product)    },    REMOVE_FROM_CART(state, payload) {      const { productId } = payload      state.cart = state.cart.filter(product => product._id !== productId)    }  }});

<!-- src/components/products/ProductList.vue --><template>  <div>    <div class="products">      <div class="container">        This is ProductList      </div>      <template v-for="product in products">        <div :key="product._id" class="product">          <p class="product__name">产品名称：{{product.name}}</p>          <p class="product__description">介绍：{{product.description}}</p>          <p class="product__price">价格：{{product.price}}</p>          <p class="product.manufacturer">生产厂商：{{product.manufacturer}}</p>          <img :src="product.image" alt="" class="product__image">          <button @click="addToCart(product)">加入购物车</button>        </div>      </template>    </div>  </div></template>
<style>.product {  border-bottom: 1px solid black;}
.product__image {  width: 100px;  height: 100px;}</style>
<script>export default {  name: 'product-list',  computed: {    // a computed getter    products() {      return this.$store.state.products;    }  },  methods: {    addToCart(product) {      this.$store.commit('ADD_TO_CART', {        product      });    }  }}</script>

<!-- src/pages/Home.vue --><template>  <div>    <div class="title">      <h1>In Stock</h1>    </div>    <product-list></product-list>  </div></template>
<script>import ProductList from '@/components/products/ProductList.vue';  export default {    name: 'home',    data () {      <!-- ... -->        msg: 'Welcome to Your Vue.js App'      };    },    components: {      'product-list': ProductList    }  }</script>

<!-- src/pages/Cart.vue --><!-- ... -->    <div class="title">      <h1>{{msg}}</h1>    </div>    <template v-for="product in cart">      <div :key="product._id" class="product">        <p class="product__name">产品名称：{{product.name}}</p>        <p class="product__description">介绍：{{product.description}}</p>        <p class="product__price">价格：{{product.price}}</p>        <p class="product.manufacturer">生产厂商：{{product.manufacturer}}</p>        <img :src="product.image" alt="" class="product__image">        <button @click="removeFromCart(product._id)">从购物车中移除</button>      </div>    </template>  </div></template>
<style>.product {  border-bottom: 1px solid black;}
.product__image {  width: 100px;  height: 100px;}</style>
<script>  export default {    name: 'home',    <!-- ... -->      return {        msg: 'Welcome to the Cart Page'      }    },    computed: {      cart() {        return this.$store.state.cart;      }    },    methods: {      removeFromCart(productId) {        this.$store.commit('REMOVE_FROM_CART', {          productId        });      }    }  }</script>

npm install axios

productById(context, payload) {  // 进行异步操作，从后端获取远程数据并返回  return response.data;}

// src/store/index.jsimport Vue from 'vue';import Vuex from 'vuex';import axios from 'axios';
const API_BASE = 'http://localhost:3000/api/v1';
Vue.use(Vuex);
// ...    // selected product    product: {},    // all products    products: [],    // all manufacturers    manufacturers: [],  },  // ...    REMOVE_FROM_CART(state, payload) {      const { productId } = payload      state.cart = state.cart.filter(product => product._id !== productId)    },    ALL_PRODUCTS(state) {      state.showLoader = true;    },    ALL_PRODUCTS_SUCCESS(state, payload) {      const { products } = payload;
      state.showLoader = false;      state.products = products;    }  },  actions: {    allProducts({ commit }) {      commit('ALL_PRODUCTS')
      axios.get(`${API_BASE}/products`).then(response => {        console.log('response', response);        commit('ALL_PRODUCTS_SUCCESS', {          products: response.data,        });      })    }  }});

<!-- src/components/products/ProductList.vue --><!-- ... -->          <p class="product__name">产品名称：{{product.name}}</p>          <p class="product__description">介绍：{{product.description}}</p>          <p class="product__price">价格：{{product.price}}</p>          <p class="product.manufacturer">生产厂商：{{product.manufacturer.name}}</p>          <img :src="product.image" alt="" class="product__image">          <button @click="addToCart(product)">加入购物车</button>        </div>      <!-- ... --><script>export default {  name: 'product-list',  created() {    if (this.products.length === 0) {      this.$store.dispatch('allProducts')    }  },  computed: {    // a computed getter    products() {      <!-- ... -->

<!-- src/pages/Cart.vue --><!-- ... -->        <p class="product__name">产品名称：{{product.name}}</p>        <p class="product__description">介绍：{{product.description}}</p>        <p class="product__price">价格：{{product.price}}</p>        <p class="product.manufacturer">生产厂商：{{product.manufacturer.name}}</p>        <img :src="product.image" alt="" class="product__image">        <button @click="removeFromCart(product._id)">从购物车中移除</button>      </div>    <!-- ... -->

mongoimport -d test -c manufacturers manufacturers.jsonmongoimport -d test -c products products.json