從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（四）

時間  2020-12-07
標籤 html 前端 vue webpack ios git github web ajax vuex 欄目 HTML 简体版
原文   原文鏈接

隨着前端應用的日漸複雜，狀態和數據管理成爲了構建大型應用的關鍵。受 Redux 等項目的啓發，Vue.js 團隊也量身定作了狀態管理庫 Vuex。在這篇教程中，咱們將帶你熟悉 Store、Mutation 和 Action 三大關鍵概念，並升級迷你商城應用的前端代碼。html

歡迎閱讀《從零到部署：用 Vue 和 Express 實現迷你全棧電商應用》系列：前端

•從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（一）[1]•從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（二）[2]•從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（三）[3]•從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（四）（也就是這篇）vue

使用 Vuex 進行狀態管理

咱們在第一篇[4]和第三篇[5]中講解了 Vue 的基礎部分，利用這些知識你已經能夠實現一些比較簡單的應用了。可是針對複雜的應用，好比組件嵌套超過三級，咱們前面講解的知識處理起來就很費力了，還好 Vue 社區爲咱們打造了狀態管理容器 Vuex[6]，用來處理大型應用的數據和狀態管理。webpack

安裝 Vuex 依賴

首先咱們打開命令行，進入項目目錄，執行以下命令安裝 Vuex:ios

npm install vuex

建立 Vuex Store

Vuex 是一個前端狀態管理工具，它致力於接管 Vue 的狀態，使得 Vue 專心作好渲染頁面的事情；它相似在前端創建了一個 「數據庫」，而後將全部的前端狀態都保存在這個 「數據庫」 裏面。這個 「數據庫」 其實就是一個普通的 JavaScript 對象。git

好了，講述了 Vuex 是幹什麼以後，咱們來看一下如何在 Vue 中運用 Vuex。Vuex 創建的這個 「數據庫」 通常用術語 store 來表示，一般咱們創建一個單獨的 store 文件夾，用於保存和 store 有關的內容。咱們在 src 文件夾下創建 store 文件夾，而後在裏面建立 index.js 文件，代碼以下：github

import 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: [], }})

上面的代碼能夠分爲三部分。web

•首先咱們導入 Vue 和 Vuex•而後咱們調用 Vue.use 方法，告訴 Vue 咱們將使用 Vuex，這和咱們以前使用 Vue.use(router) 的原理同樣•最後咱們導出 Vuex.Store 實例，而且傳入了 strict 和 state 參數。這裏 strict 參數表示，咱們必須使用 Vuex 的 Mutation 函數來改變 state，不然就會報錯（關於 Mutation 咱們將在 「使用 Vuex 進行狀態管理」 一節講解）。而 state 參數用來存放咱們全局的狀態，好比咱們這裏定義了 cart、 showLoader 等屬性都是後面咱們完善應用的內容須要的數據。ajax

將 Vuex 和 Vue 整合

當咱們建立並導出了 Vuex 的 store 實例以後，咱們就可使用它了。打開 src/main.js 文件，在開頭導入以前建立的 store ，並將 store 添加到 Vue 初始化的參數列表裏，代碼以下：vuex

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue';import { ValidationProvider } from 'vee-validate';
import App from './App';import router from './router';import store from './store';
Vue.config.productionTip = false;Vue.component('ValidationProvider', ValidationProvider);
/* eslint-disable no-new */new Vue({ el: '#app', router, store, components: { App }, template: '<App/>',});

能夠看到，在上面的文件中，咱們一開頭導入了咱們以前在 src/store/index.js 裏定義的 store 實例，接着，在 Vue 實例初始化時，咱們將這個 store 實例使用對象屬性簡潔寫法添加到了參數列表裏。

當咱們將 store 當作參數傳給 Vue 進行初始化以後，Vue 就會將 Store 裏面的 state 注入到全部的 Vue 組件中，這樣全部的 Vue 組件共享同一個全局的 state ，它其實就是一個 JS 對象，應用中全部狀態的變化都是對 state 進行操做，而後響應式的觸發組件的從新渲染，因此這裏的 state 也有 「數據的惟一真相來源」 的稱謂。

這種將狀態保存到一個全局的 JavaScript 對象 -- state 中，而後全部的增、刪、改、查操做都是對這個 JavaScript 對象進行，使得咱們能夠避免組件嵌套層級過深時，組件之間傳遞屬性的複雜性，讓屬性的定義，獲取，修改很是直觀，方便開發大型應用和團隊協做。

查看 Vuex 整合後的效果

在將 Vuex 和 Vue 整合好以後，咱們立刻來看一下 Vuex 帶來的效果，不過在此以前咱們先來說一講什麼是計算屬性（computed）。

計算屬性（Computed）

首先咱們新增了 script 部分，而後在導出的對象裏面增長了一個 computed 屬性，這個屬性裏面的內容用於申明一些可能要在 template 裏面使用的複雜表達式。咱們來看一個例子來說解一下 computed 屬性：

咱們在模板中可能要獲取一個多級嵌套對象裏面的某個數據，或者要渲染的數據須要通過複雜的表達式來計算，好比咱們要渲染這樣一個數據 obj1.obj2.obj3.a + obj1.obj4.b，寫在模板裏就是這樣的：

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

能夠看到，咱們一眼看上去，這個模板裏面有這樣一個複雜的表達式，很不容易反應出來它到底要渲染什麼，這樣代碼的可讀性就不好，因此 Vue 爲咱們提供了計算屬性（ computed ），用於用簡單的變量來表明複雜的表達式結果，進而簡化模板中插值的內容，讓咱們的模板看起來可讀性更好，上面的代碼使用計算屬性來改進會變成下面這樣：

<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>

能夠看到，當咱們使用了計算屬性 addResult 以後，咱們在模板裏面的寫法就簡化了不少，並且一目瞭然咱們是渲染了什麼。

瞭解了計算屬性以後，咱們打開 src/pages/admin/Products.vue，對內容做出以下改進以查看 Vuex 和 Vue 整合以後的效果：

<template> <div> <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>

能夠看到，上面的內容改進主要分爲兩個部分：

•首先咱們定義了一個 product 計算屬性，它裏面返回一個從 store 中保存的 state 取到的 products 數組的第一個元素，注意到當咱們在 「將 Vuex 和 Vue 整合」 這一小節中將 store 做爲 Vue 初始化實例參數，因此咱們在全部的 Vue 組件中能夠經過 this.$store.state 的形式取到 Vuex Store 中保存的 state。•接着咱們使用了計算屬性 product，取到了它的 name 屬性進行渲染。

小結

在這一小節中，咱們學習瞭如何將 Vuex 整合進 Vue 中：

•首先咱們安裝了 vuex 依賴•接着咱們在 src 下面建立了 store 文件夾，用於保存 Vuex 相關的內容，在 store 文件下之下，咱們建立了 index.js 文件，在裏面實例化了 Vuex.Store 類，咱們在實例化的過程當中傳遞了兩個參數：strict 和 state，strict 表示咱們告訴 Vue，只容許 Mutation 方法才能修改 state，確保修改狀態的惟一性；state 是咱們整個應用的狀態，整個應用的狀態都是從它獲取，整個應用狀態的改變都是修改它，因此這個 state 也有 「數據的惟一真相來源」 的稱謂。•而後咱們經過在 main.js 裏面導入實例化的 store，將它加入到初始化 Vue 實例的參數列表中，實現了 Vuex 和 Vue 的整合。•最後咱們講解了計算屬性，而後經過在計算屬性中獲取 this.$store.state 的方式展現了 Vuex 整合以後的效果。

好了，咱們已經整合了 Vuex，並在 Vue 組件中獲取了保存在 Vuex Store 中的狀態（state），接下來咱們來看一下如何修改這個狀態。

使用 Mutation 修改本地狀態

咱們在上一節中定義了 Vuex Store，並在裏面保存了全局的狀態 state，這一節咱們來學習如何修改這一狀態。

理解 Mutation：修改狀態的惟一手段

Vuex 爲咱們提供了 Mutation，它是修改 Vuex Store 中保存狀態的惟一手段。

Mutation 是定義在 Vuex Store 的 mutation 屬性中的一系列形如 (state, payload) => newState 的函數，用於響應從 Vue 視圖層發出來的事件或動做，例如：

ACTION_NAME(state, payload) { // 對 `state` 進行操做以返回新的 `state` return newState;}

其中方法名 ACTION_NAME 用於對應從視圖層裏面發出的事件或動做的名稱，這個函數接收兩個參數 state 和 payload，state 就是咱們 Vuex Store 中保存的 state，payload 是被響應的那個事件或動做攜帶的參數，而後咱們經過 payload 的參數來操做現有的 state，返回新的 state，經過這樣的方式，咱們就能夠響應修改 Vuex Store 中保存的全局狀態。

瞭解了 Mutation 的概念以後，咱們立刻來看一下如何運用它。

初始化狀態（硬編碼）

咱們打開 src/store/index.js 文件，修改其中的 state 並加上 mutations 以下：

import 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: [ { _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) } }});

能夠看到上面的代碼改進分爲兩個部分：

•首先咱們擴充了 state 中的 products 屬性，在裏面保存一開始咱們的迷你電商平臺的初始數據，這裏咱們是硬編碼到代碼中的，在下一節 「使用 Action 獲取遠程數據」中，咱們將動態獲取後端服務器的數據。•接着咱們在 Vuex.Store 實例化的參數中添加了一個 mutations 屬性，在裏面定義了兩個函數 ADD_TO_CART 和 REMOVE_FROM_CART，分別表明響應從視圖層發起的對應將商品添加至購物車和從購物車移除商品的動做。

建立 ProductList 組件

接着建立 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>

咱們首先來看該組件的 script 部分：

•先定義了一個計算屬性 products，經過 this.$store.state.products 從本地狀態中獲取到了 products 數組，並做爲計算屬性 products 的返回值•而後定義了一個點擊事件 addToCart，而且傳入了當前處於激活狀態的 product 參數。當用戶點擊「添加購物車」時，觸發 addToCart 事件，也就是上面所說的視圖層發出的事件。這裏是經過 this .$store.commit 將攜帶當前商品的對象 {product} 做爲載荷提交到類型爲ADD_TO_CART的 mutation 中，在 mutation 中進行本地狀態修改，咱們會在後面抽離出的 mutations 文件中看到具體的操做。

再看該組件的 template 部分，使用 v-for 將從本地獲取到的 products 數組進行遍歷，每一個 product 對象的詳細信息都會顯示在模板中。此外，咱們還在每一個 product 對象信息的最後添加了一個「加入購物車」的按鈕，容許咱們將指定商品添加到購物車。

在頁面中接入數據

Store 和組件都搞定以後，咱們就能夠在以前的頁面中接入數據了。修改主頁 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 () { return { msg: 'Welcome to Your Vue.js App' }; }, components: { 'product-list': ProductList } }</script>

能夠看到，咱們在導入 ProductList 組件後，將其註冊到 components 中，而後在模板中使用這個組件。

接着修改購物車頁面 src/pages/Cart.vue 文件，將購物車中的商品信息展現出來，添加代碼以下：

<template> <div> <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', data () { 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>

咱們在該組件中主要增長了兩部分代碼：

•

首先是 script 部分，咱們增長了一個計算屬性和一個點擊事件。一樣是經過 this.$store.state.cart 的方式從本地狀態中獲取購物車數組，並做爲計算屬性 cart 的返回值；當用戶點擊購物車中的某個商品將其移除購物車時就會觸發 removeFromCart 事件，而且將要移除的商品 id 做爲參數傳入，而後也是經過 this.$store.commit 的方式將包含 productId 的對象做爲載荷提交到類型爲 REMOVE_FROM_CART 的 mutation 中，在 mutation 中進行本地狀態修改，具體修改操做咱們能夠在後面抽離出的 mutations 文件中看到。

•

而後是 template 部分，咱們經過 v-for 遍歷了購物車數組，將購物車中的全部商品信息展現在模板中。並在每一個商品信息的最後添加了一個移除購物車的按鈕，當用戶但願移除購物車中指定商品時，會觸發 removeFromCart 事件。



查看效果

在項目根目錄下運行 npm start，進入開發服務器查看效果：

能夠看到，一開始咱們的購物車是空的，而後隨便選了兩款手機，點擊「加入購物車」，而後就能夠在購物車頁面看到了！咱們還能夠將購物車中的商品移除。

小結

在這一部分中咱們學習瞭如何發起修改本地狀態的「通知」：

•首先咱們須要在 Vuex.Store 實例化的參數中添加一個 mutations 屬性，在該屬性中添加對應的方法，好比 ADD_TO_CART 和 REMOVE_FROM_CART。•而後咱們須要經過用戶不一樣的操做（好比點擊添加購物車或者移除購物車）來發起「通知」，進而經過 this.$store.commit 的方式將須要操做的對象做爲載荷提交到對應類型（也就是 ADD_TO_CART 和 REMOVE_FROM_CART）的 mutation 中，在 mutation 中進行本地狀態修改。

使用 Action 獲取遠程數據

咱們在上一節中學習瞭如何在視圖層發起本地狀態修改的「通知」，這一節咱們來學習如何從後端獲取遠程數據。請求庫咱們採用的是 axios[7]，經過如下命令安裝依賴：

npm install axios

理解 Action：異步操做

Vuex 爲咱們提供了 Action，它是用來進行異步操做，咱們能夠在這裏向後端發起網絡數據請求，並將請求到的數據提交到對應的 mutation 中。

Action 是定義在 Vuex Store 的 action 屬性中的一系列方法，用於響應從 Vue 視圖層分發出來的事件或動做，一個 Action 是形如 (context, payload) => response.data 的函數：

productById(context, payload) { // 進行異步操做，從後端獲取遠程數據並返回 return response.data;}

其中：

•函數名 productById 用於對應從視圖層裏面分發出的事件或動做的名稱•函數接收兩個參數 context 和 payload•context 指的是 action 的上下文，與 store 實例具備相同的方法和屬性，所以咱們能夠調用 context.commit 提交一個 mutation，或者經過 context.state 和 context.getters 來獲取 state 和 getters，可是 context 對象又不是 store 實例自己•payload 是分發時攜帶的參數，而後咱們經過 payload 中的參數來進行異步操做，從而獲取後端響應數據並返回。這樣咱們就能夠根據用戶的操做同步更新後端數據，並將後端響應的數據提交給 mutation，而後利用 mutation 進行本地數據更新。

實現第一個 Action

讓咱們趁熱打鐵，實現第一個 Action。再次來到 src/store/index.js 文件，修改代碼以下：

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; } }, actions: { allProducts({ commit }) { commit('ALL_PRODUCTS')
 axios.get(`${API_BASE}/products`).then(response => { console.log('response', response); commit('ALL_PRODUCTS_SUCCESS', { products: response.data, }); }) } }});

能夠看到，咱們作了如下幾件事：

1.導入了 axios，並定義了 API_BASE 後端接口根路由；2.咱們在 store 中去掉了以前硬編碼的假數據，使 products 默認值爲空數組；3.而後在 mutations 屬性中添加了 ALL_PRODUCTS 和 ALL_PRODUCTS_SUCCESS 方法，用來響應 action 中提交的對應類型事件；ALL_PRODUCTS 將 state.showLoader 設爲 true，顯示加載狀態；ALL_PRODUCTS_SUCCESS 將 action 中提交的數據保存到 state 中，並取消加載狀態；4.最後添加了 actions 屬性，在 actions 屬性中定義了 allProducts 函數用於響應視圖層分發的對應類型的事件；咱們首先提交了類型爲 ALL_PRODUCTS 的 mutation ，接着在 axios 請求成功後提交 ALL_PRODUCTS_SUCCESS，並附帶 products 數據體（payload）

提示

咱們能夠看到 allProducts 方法中傳入了 { commit } 參數，這是採用瞭解構賦值的方式 const { commit } = context，避免後面使用 context.commit 過於繁瑣。

更新 ProductList 組件

再來看 src/components/products/ProductList.vue 文件，咱們對其作了修改，主要添加了生命週期函數 created，在該組件剛被建立時首先判斷本地 products 中是否有商品，若是沒有就向後端發起網絡請求獲取數據。代碼以下：

<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.manufacturer">生產廠商：{{product.manufacturer.name}}</p> <img :src="product.image" alt="" class="product__image"> <button @click="addToCart(product)">加入購物車</button> </div> </template> </div> </div></template>
<!-- style -->
<script>export default { name: 'product-list', created() { if (this.products.length === 0) { this.$store.dispatch('allProducts') } }, computed: { // ... }, methods: { // ... }}</script>

注意到咱們修改了兩個地方：

•調整模板中「生產廠商」字段，把 {{product.manufacturer}} 修改成 {{product.manufacturer.name}}•添加 created 生命週期方法，在該組件剛被建立時判斷 this.products.length === 0 是 true 仍是 false，若是是 true 則證實本地中尚未任何商品，須要向後端獲取商品數據，因而經過 this.$store.dispatch 的方式觸發類型爲 allProducts 的 action 中，在 action 中進行異步操做，發起網絡請求向後端請求商品數據並返回；若是是 false 則證實本地中存在商品，因此能夠直接從本地獲取而後進行渲染。

最後咱們也一樣須要調整一下 src/pages/Cart.vue 中的「生產廠商」字段，修改其模板代碼以下：

<template> <div> <div class="title"> <h1>{{msg}}</h1> </div> <template v-for="product in cart"> <div :key="product._id" class="product"> <!-- 其餘字段 --> <p class="product.manufacturer">生產廠商：{{product.manufacturer.name}}</p> <img :src="product.image" alt="" class="product__image"> <button @click="removeFromCart(product._id)">從購物車中移除</button> </div> </template> </div></template>
<!-- style -->
<!-- script -->

一樣把 {{product.manufacturer}} 修改成 {{product.manufacturer.name}}。

查看效果

在測試這一步效果以前，首先確保 MongoDB 和後端 API 服務器已經開啓。同時，若是你以前沒有在第二篇教程[8]中測試過，頗有可能你的數據庫是空的，那麼能夠下載咱們提供的 MongoDB JSON 數據文件 manufacturers.json[9] 和 products.json[10]，而後運行如下命令：

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

而後再進入前端測試，你應該就能夠看到從後臺獲取到的數據，而後一樣能夠添加到購物車哦！

小結

在這一部分中咱們學習瞭如何使用 Action 獲取遠程數據，並將獲取的數據提交到對應的 Mutation 中：

•首先咱們須要導入相關依賴：axios 和 API_BASE，因爲發起網絡請求。•其次咱們須要在 store 實例中添加 actions 屬性，並在 actions 屬性定義對應的方法，用於響應視圖層分發的對應類型的事件。•在不一樣的方法中發起不一樣的網絡請求，你是須要從後端獲取數據，仍是修改後端數據等等。而後將後端響應的數據結果提交到對應類型的 mutation 中。

在下一篇教程中，咱們將進一步探索 Vue 組件化，從而簡化頁面邏輯，並抽出 Getters 和 Mutation 數據邏輯。

想要學習更多精彩的實戰技術教程？來圖雀社區[11]逛逛吧。

References

[1] 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（一）: https://juejin.im/post/5dfd851c6fb9a0163e248463
[2] 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（二）: https://juejin.im/post/5dff8da76fb9a01634475731
[3] 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（三）: https://juejin.im/post/5e10a4665188253a800423a5
[4] 第一篇: https://juejin.im/post/5dfd851c6fb9a0163e248463
[5] 第三篇: https://juejin.im/post/5e10a4665188253a800423a5
[6] Vuex: https://vuex.vuejs.org/zh/
[7] axios: https://www.npmjs.com/package/axios
[8] 第二篇教程: https://tuture.co/2019/10/21/cb08dc8/
[9] manufacturers.json: https://raw.githubusercontent.com/tuture-dev/vue-online-shop-backend/master/data/manufacturers.json
[10] products.json: https://raw.githubusercontent.com/tuture-dev/vue-online-shop-backend/master/data/products.json
[11] 圖雀社區: https://tuture.co

本文分享自微信公衆號 - 大前端技術沙龍（is_coder）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程