Byte Ebi's Logo

Byte Ebi 🍤

每天一小口,蝦米變鯨魚

[Express+Vue 搭建電商網站] 11 認識 vuex

使用 Express + Vue 搭建一個電商網站 - 認識 vuex

Ray

vuex 來協助我們集中管理組件狀態,就不用到處維護狀態
使得組件只需要專注於渲染頁面,而前端狀態都保留在 vuex 中建立的狀態庫中
所謂狀態庫,其實也就是一個 Javascript 物件

安裝 vuex

可以使用指令

npm install vuex --save

或是依然使用 vue ui 來安裝
install-vuex

如果是使用 vue ui 安裝,會發現專案下多了一個檔案:/src/store/index.js,先用以下內容取代原本的檔案

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

上面我們做了一些事情

  • 導入了 VueVuex
  • 調用 Vue.use 方法宣告使用 Vuex,聽起來和 vue-router 的時候一樣
  • 最後導出 Vuex.Store 物件,並傳入 strictstate 參數
    strict 宣告我們必須使用 Vuex 的 Mutation 函數來改變 state,否則會報錯(這部分會在之後的章節說明)
    state 參數儲存全域的狀態,比如在這邊定義了 cartshowLoader 等屬性
    都是後面我們操作會使用到的資料

整合 Vuex 和 Vue

當我們建立了 Vuexstore 物件後就可以使用它了,打開 src/main.js
在開頭導入之前建立的 store,並且將 store 添加到 Vue 初始化的參數列表裡

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

如果你是使用 Vue ui 安裝,打開檔案可以見到程式已經幫我們完成了以上的內容
當我們將 store 導入到了 Vue 中進行初始化後,Vue 會將 store 裡面的 state 注入到所有的組件中
這樣所有的 Vue 組件就共享了一個全域的 state

而所有的狀態變化都是針對這個 javascript 物件進行操作,然後觸發組件的重新渲染
同時也避免了組件嵌套層級過多時,組件之間傳遞屬性的複雜性,便於大型程式與團隊合作

查看結果

在整合好 Vuex 和 Vue 之後,馬上來看看 Vuex 帶來的變化。打開 src/pages/admin/Products.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>

可以在 <script> 中看到一個沒見過的東西 computed,先來了解一下這是什麼

Computed

如果在前端模板內加入太多的邏輯運算,不但可讀性差也難以維護,這問題在後端套版時常常發生,很難一眼看出它到底要渲染什麼
計算屬性 (computed) 有點類似於 method,但 method 需要括號來觸發
而且 method 不管相依的資料有沒有改變,都會重新計算。computed 則是在相依的資料有改變時才做計算並渲染
所以需要每次更新的行為用 method,在意效能的話使用 computed

講完了 computed 屬性,回頭來看剛剛的改動,我們在 computed 定義了一個 product 屬性
會去 Vuex 也就是 store 中的 stateproducts 的第一個元素
然後在頁面上使用剛剛取到的內容中的 name 屬性渲染

於是我們知道可以使用 this.$store.state 來取得 Vuex store 中保存的 state


專案範例程式碼 GitHub 網址:ray247k/mini-E-commerce

最新文章

Category

Tag