F2E 拉賽 Vuex

---

What is Vuex ?

• 單向資料流
• Flux design pettern
• 統一管理應用程式所有狀態

---

Vuex = 狀態管理模式

---

狀態管理模式-官方 vue 計數器說明

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

---

Vuex flow

---

Vuex Install

Vuex git
Vuex gitbook

npm install vuex --save

---

建立資料結構

├─src
│  ├─components
│  ├─router
│  ├─store (new)
│  │  └─index.js (必備預設檔名)
│  └─main.js

---

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {}
const getters = {}
const actions = {}
const mutations = {}

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

---

main.js

...
import store from './store';

new Vue({
  el: '#app',
  router,
  // 加入 store
  store,
  template: '<App/>',
  components: { App }
})

---

角色分析

腳色	職權
state	存放 APP 所有 state
action	調用 mutation 函式及處理 ajax (非同步)
getter	負責取 state 資料
mutation	負責改變 state 資料 (同步)

---

在 Vue 使用 Vuex Action

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    // 方法一 直接取用
    ...mapActions([
      'increment'
    ]),
    // 方法二 另存別名取用
    ...mapActions({
      add: 'increment' // 使用 add 為元件內別名
    }),
    // 方法三 直接呼叫使用
    actionIncrement(){
        this.$store.dispatch('increment')
    }
  }
}

---

在 Vue 使用 Vuex Getter

import { mapGetters  } from 'vuex'

export default {
 data () {
    return {
      // 方法三 直接呼叫使用
      count: this.$store.state.count
    }
  },
  computed: {
    // 方法一 直接取用
    ...mapGetters([
      'getCount'
    ]),
    // 方法二 另存別名取用
    ...mapGetters({
      count: 'getCount' // 使用 add 為元件內別名
    })
  }
}

---

Vue 套用了 Vuex

---

學會 Vuex 了吧!?

---

Reference

• Vuex git
• Vuex gitbook
• vue & vuex 10 - 什麼是 vuex?
• vue & vuex 11 - 計數器 - I (vuex 職權與流程說明)