F2E 拉賽 Vuex

What is Vuex ?

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

Vuex = 狀態管理模式

F2E 拉賽 - Vuex flow

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

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

Vuex flow

F2E 拉賽 - 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 為元件內別名
    })
  }
}

F2E 拉賽 Vuex

What is Vuex ?

Vuex = 狀態管理模式

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

Vuex flow

Vuex Install

建立資料結構

store/index.js

main.js

角色分析

在 Vue 使用 Vuex Action

在 Vue 使用 Vuex Getter

Vue 套用了 Vuex

學會 Vuex 了吧!?

Reference

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

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

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

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

	import { mapActions } from 'vuex'

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

	import { mapGetters } from 'vuex'

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