iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 23

中央狀態指揮中心- Vuex [序]

什麼是 Vuex ?

為 Vue.js 開發的狀態管理模式,集中管理元件的狀態。

像是電商網站中的購物車,跟全站十分緊密,商品數量增減、商品新增移除等等。Vuex 提供 Store ,類似 window 物件一樣,供元件去存取。

單向資料流

要更動 state 時,透過 actions 發出 commit 去呼叫 mutations,mutations 再去更改 state,整個這樣的方法稱為 store

vuex

圖取自What is Vuex?

  • state 物件,包含所有應用程式的狀態 (可以是任何變數以及陣列)
  • mutations 物件,更改狀態時使用的方法
    • 同步的操作
  • actions 物件,用來呼叫 mutation 的方法
    • 用來做非同步的操作

來個基本範例

stor 像是一個中央倉庫般的存在,分享在 App 中的狀態。

// src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

利用 store.state 取得狀態物件,並使用state.commit 觸發狀態改變

store.commit('increment')

console.log(store.state.count) // -> 1

未完待續的 Vuex...

每日一句:
最後一個衝刺假日 /images/emoticon/emoticon02.gif


上一篇
頁面切換好夥伴- Vue Router [續]
下一篇
中央狀態指揮中心- Vuex [續]
系列文
別再說我不會框架,網頁 Vue 起來!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言