1.抽出action,建立一個action.js檔案,
import { Message } from 'element-ui';import Axios from "axios";const API_BASE = 'http://localhost:3000/api/v1';export const productActions = { //擷取所有商品接口 allProducts({commit}){ commit(ALL_PRODUCTS);//失敗 //請求成功資料存放在products Axios.get(`${API_BASE}/products`).then(response=>{ console.log("response",response); commit(ALL_PRODUCTS_SUCCESS,{ products:response.data, }) }) }, //根據商品id發送請求 productById({ commit }, payload) { commit(PRODUCT_BY_ID);//失敗 const { productId } = payload; //請求成功資料存放在products Axios.get(`${API_BASE}/products/${productId}`).then(response => { console.log("response",response); commit(ALL_PRODUCTS_SUCCESS,{ product: response.data, }) }) }, //删除品牌商的發送事件 removeProduct({ commit }, payload) { commit(REMOVE_PRODUCT);//送出一個狀态 const { productId } = payload; Axios.delete(`${API_BASE}/products/${productId}`) .then(() => { // 傳回 productId，用于删除本地對應的商品 commit(REMOVE_PRODUCT_SUCCESS, { productId }); Message({ message: "恭喜你，商品删除成功！", type: "success" }); }) .catch(() => { Message.error("不好意思，商品删除失敗！"); }); },};export const manufacturerActions = { //擷取所有制造商資訊 allManufacturers({commit}){ //送出一個加載的狀态 commit(ALL_MANUFACTURERS); Axios.get(`${API_BASE}/manufacturers`).then(response => { console.log("manufacturers響應資料：",response.data); commit(ALL_MANUFACTURERS_SUCCESS,{ manufacturers:response.data }) }) }, //發送删除制造商的請求 removeManufacturer({commit},payload){ commit(REMOVE_MANUFACTURER); const{manufacturerId}=payload; Axios.delete(`${API_BASE}/manufacturers/${manufacturerId}`).then(response=>{ commit(REMOVE_MANUFACTURER_SUCCESS,{ manufacturerId }); Message({ message:"恭喜删除成功", type:"success" }) }) .catch(() => { Message.error("不好意思，制造商删除失敗！"); }); }}
2.index.js引入action子產品
import { productActions, manufacturerActions } from "./actions"; //異步請求 actions:{ ...productActions,//産品 ...manufacturerActions//制造商}
3.重構Edit.
created():在這裡根據沒有這個屬性的商品名稱，就執行一個異步請求，在action中，然後通過mutation,改變store,然後getter複用資料，在計算機屬性中傳回getter的資料，最後就在模闆中通過:model="model"，綁定這個變量
<template> <div> <div class="title"> <h1>This is Admin/Edit/$route.params[id]h1> <product-form @save-product="updateProduct" :model="model" :manufacturers="manufacturers" :isEditing="true" >product-form> div> div>template><script> import ProductForm from "@/components/products/ProductForm.vue" export default{ created(){ const {name}=this.model; //發送一個dispath異步的請求，當元件剛比建立判斷計算屬性的model是否有值，沒有就再次請求 if(!name){ this.$store.dispatch("productById",{// productById根據id去請求資料 productId:this.$route.params['id']//擷取目前id路由的 }) } if (this.manufacturers.length === 0) { this.$store.dispatch('allManufacturers'); } }, computed: { //制造商 manufacturers(){ return this.$store.getters.allManufacturers; }, //傳回本地商品 model(){ //通過方法通路的方式調用指定的 getter 屬性 productById //parms參數是目前已經激活的路由id const product = this.$store.getters.productById(this.$route.params['id']); // 這裡傳回 product 的拷貝，是為了在修改 product 的拷貝之後，在儲存之前不修改本地 Vuex stire 的 product 屬性 return { ...product, manufacturer: { ...product.manufacturer } }; } }, methods:{ updateProduct(product){ this.$store.dispatch("updateProduct",{ product }) } }, //注冊元件 components:{ 'product-form':ProductForm }}script>
4.重構New元件
<template> <div><h1>新增資料元件h1> <product-form @save-product="addProduct" :model="model" :manufacturers="manufacturers" > product-form> div>template><script>import ProductForm from '@/components/products/ProductForm.vue';export default { data(){ return{ //model.manufacturer.name, 這些資料四mode下，預設的mode沒有name:"", //_id:"" model:{ manufacturer:{ name:"", _id:"" } } }}, created() { if (this.manufacturers.length === 0) { this.$store.dispatch('allManufacturers');//擷取所有廠商 } }, computed: { manufacturers() { return this.$store.getters.allManufacturers;//然後傳回廠商資料 }, }, methods: { addProduct(model) { console.log('model', model); this.$store.dispatch('addProduct', { product: model, }) }, }, components: { 'product-form': ProductForm }}script>
5.在action新增加修改請求，新增請求
//修改商品 updateProduct({commit},payload){ commit('UPDATE_PRODUCT');//送出muaction const { product } = payload; //發送異步請求 Axios.put(`${API_BASE}/products/${product._id}`, product).then(() => { commit('UPDATE_PRODUCT_SUCCESS', { product }) }) }, //添加産品 addProduct({ commit }, payload) { commit('ADD_PRODUCT'); const { product } = payload; axios.post(`${API_BASE}/products`, product).then(response => { commit('ADD_PRODUCT_SUCCESS', { product: response.data, }) }) }
6.muatcion新增加修改資料，新增資料的修改狀态
既然action進行請求，那麼相對應的muaciton修改的狀态也要有
修改産品
//修改産品 UPDATE_PRODUCT(state){ state.showLoader=true }, UPDATE_PRODUCT_SUCCESS(state,payload){ state.showLoader=false; const {product:newProduct}=payload;//修改的資料是對象 state.product=newProduct; state.products=state.products.map(product=>{ if(product._id===newProduct._id){ return newProduct;//新的資料資料， } return product;//沒用修改就傳回一個舊的資料 }) },
新增産品
//添加産品 ADD_PRODUCT(state) { state.showLoader = true; }, ADD_PRODUCT_SUCCESS(state, payload) { state.showLoader = false; const { product } = payload; state.products = state.products.concat(product); } };
7.getters
這裡實作點選修改，會傳進來一個id，使用filte()過濾
export const productGetters = { //擷取所有商品，進行複用緩存起來 allProducts(state){ return state.products;//是這拿的actions請求，mutaions修改state資料的:allProducts }, //判斷本地時候存在這個商品了getters， //傳入的參數如果存在則傳回該商品，如果不存在則傳回空對象 productById:(state,getters)=>id=>{ console.log(id)//id是目前點選的進來的id if (getters.allProducts.length > 0) { //傳回目前資料那一個商品是和傳過來的id相等 return getters.allProducts.filter(p => p._id == id)[0]; // return getters.allProducts.filter(function(item){ // item._id==id; // })[0] } else { return state.product; } }}
擴充
1.filter()
數組的過濾方法，方法建立一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
可以傳回item.id=id的資料
array.filter(function(currentValue,index,arr), thisValue)
比如:傳回大于等于18的資料
var ages = [32, 33, 16, 40];function checkAdult(age) { return age >= 18;}function myFunction() { document.getElementById("demo").innerHTML = ages.filter(checkAdult);}
2.子傳父事件
上面表單是子元件，在新增new父元件使用了
ProductForm.vue子元件
this.model是把資料送出到這個事件中save-product
saveProduct() { //送出到這個事件中 this.$emit('save-product', this.model) }
New.vue
addProduct這個事件進行一個監聽
<product-form @save-product="addProduct" :model="model" :manufacturers="manufacturers" > </product-form>
本文是個人總結筆記，主要是加深自己的了解。
想看從0開始的可以走這個連結：《圖雀社群》
從零到部署：用 Vue 和 Express 實作迷你全棧電商應用(一)
