[Express+Vue 搭建電商網站] 15 使用 Vuex Getters 複用資料邏輯
使用 Express + Vue 搭建一個電商網站 - 使用 Vuex Getters 複用資料邏輯
有時候我們需要 computed store 中的 state，在每個組件中複製貼上同樣的 computed 似乎不是一個明智的作法
Vuex Getter
是 Vuex 提供讓我們可以對 Vuex store 中 state 資料做預處理的方法，就可以達成這個目的
建立 Getter
首先在原本的 src/store/index.js 檔案裡加入一些新的 action、mutation 屬性
以及這次要使用的 getter
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
const API_BASE = 'http://localhost:3000/api/v1';
Vue.use(Vuex);
export default new Vuex.Store({
strict: true,
state: {
// bought items
cart: [],
// ajax loader
showLoader: false,
// selected product
product: {},
// all products
products: [],
// 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)
},
ALL_PRODUCTS(state) {
state.showLoader = true;
},
ALL_PRODUCTS_SUCCESS(state, payload) {
const { products } = payload;
state.showLoader = false;
state.products = products;
},
PRODUCT_BY_ID(state) {
state.showLoader = true;
},
PRODUCT_BY_ID_SUCCESS(state, payload) {
state.showLoader = false;
const { product } = payload;
state.product = product;
}
},
getters: {
allProducts(state) {
return state.products;
},
productById: (state, getters) => id => {
if (getters.allProducts.length > 0) {
return getters.allProducts.filter(p => p._id == id)[0];
} else {
return state.product;
}
}
},
actions: {
allProducts({ commit }) {
commit('ALL_PRODUCTS')
axios.get(`${API_BASE}/products`).then(response => {
console.log('response', response);
commit('ALL_PRODUCTS_SUCCESS', {
products: response.data,
});
})
},
productById({ commit }, payload) {
commit('PRODUCT_BY_ID');
const { productId } = payload;
axios.get(`${API_BASE}/products/${productId}`).then(response => {
commit('PRODUCT_BY_ID_SUCCESS', {
product: response.data,
});
})
}
}
});
主要增加了三個部分
- mutations：增加了
PRODUCT_BY_ID、PRODUCT_BY_ID_SUCCESS用來管理單一商品的資訊狀態 - actions：增加了
productById來呼叫mutations中的方法取得商品資訊 - getters：建立 getters，並且加入
allProducts和productById方法
allProducts取得所有商品；productById則會回傳指定 id 的商品資料，如果商品不存在則回傳空的物件
在後台 Products 組件中使用 Getters
先使用一個簡單的範例說明 Getters 是怎麼運作的，打開 src/views/admin/Products.vue 組件
並且把以下內容
return this.$store.state.products[0];
替換成
return this.$store.getters.allProducts[0];
在這個範例中，我們通過 this.$store.getters.allProducts 來調用 getter 中的 allProducts 屬性
並且顯示出第一個商品的名稱
建立 ProductDetail 組件
在簡單的了解 Getter 是怎麼運作之後，要來實現單一商品詳細內容的組件
新建 src/components/products/ProductDetail.vue
<template>
<div class="product-details">
<div class="product-details__image">
<img :src="product.image" alt class="image" />
</div>
<div class="product-details__info">
<div class="product-details__description">
<small>生產商：{{product.manufacturer.name}}</small>
<h3>產品名稱：{{product.name}}</h3>
<p>簡介：{{product.description}}</p>
</div>
<div class="product-details__price-cart">
<p>價錢：{{product.price}}</p>
<product-button :product="product"></product-button>
</div>
</div>
</div>
</template>
<style>
.product-details__image .image {
width: 100px;
height: 100px;
}
</style>
<script>
import ProductButton from "./ProductButton";
export default {
props: ["product"],
components: {
"product-button": ProductButton
}
};
</script>
可以看到這個組件將會利用父組件傳入的 product 物件來顯示內容
並且複用了先前建立的 ProductButton 組件
在 ProductItem 組件中為商品加入連結
有了詳細頁面，我們還需要設定怎麼進入商品詳細頁面的連結
打開 src/components/products/ProductItem.vue 組件，將 <template> 區塊編輯成以下樣式
<template>
<div>
<div class="product">
<router-link :to="'/detail/' + product._id" class="product-link">
<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" />
</router-link>
<product-button :product="product"></product-button>
</div>
</div>
</template>
<style>
.product {
border-bottom: 1px solid black;
}
.product__image {
width: 100px;
height: 100px;
}
</style>
可以發現我們使用了之前學過的 vue-router 中的 router-link 方法跳轉到指定編號的商品頁面
在 ProductList 中使用 Getters
而原先商品列表組件（src/components/products/ProductList.vue）「取得所有商品」功能
也是直接操作 Vuex store 中的 state
computed: {
products() {
return this.$store.state.products;
}
},
在這邊我們也改用剛剛學到的 Getter 改寫成以下內容，使用指定的 getter：allProducts 取得所有商品資料
computed: {
products() {
return this.$store.getters.allProducts;
}
},
建立 Detail 頁面組件
現在子組件都完成了，只缺一個詳細商品頁面將組件拿來使用
建立 src/views/Detail.vue
<template>
<div>
<product-detail :product="product"></product-detail>
</div>
</template>
<script>
import ProductDetail from "@/components/products/ProductDetail.vue";
export default {
created() {
// 如果使用者儲存的狀態中不存在此商品，則從後端取得商品資訊
const { name } = this.product;
if (!name) {
this.$store.dispatch("productById", {
productId: this.$route.params["id"]
});
}
},
computed: {
product() {
return this.$store.getters.productById(this.$route.params["id"]);
}
},
components: {
"product-detail": ProductDetail
}
};
</script>
引入了 ProductDetail 組件，並且在生命週期中頁面建立「created()」時檢查使用者端是否有指定商品的資料
沒有則使用異步方法呼叫 Vuex action 取得資訊，並透過 mutation 修改狀態
其中的 computed 屬性用於取得狀態管理中的指定商品
而其中的 id 參數透過 this.$route.params['id'] 取得路由中的產品編號，傳入指定的 getter 取得指定商品資料
設定 Detail 頁面路由
剛剛提到會使用路由傳入的產品編號來查詢產品資料，有沒有想起什麼事情？
打開 vue-router 的設定檔 src/router/index.js 引入 Detail 頁面
import Detail from '@/views/Detail';
在路由規則中加入 Detail 頁面設定值
{
path: '/detail/:id',
name: 'Detail',
component: Detail,
},
成果
打開專案頁面，可以在商品列表發現所有商品現在都有了超連結
點擊超連結之後會進入商品詳細頁面，而顯示的就是該商品的詳細資料
專案範例程式碼 GitHub 網址：ray247k/mini-E-commerce
