1. vuex是什麼

github站點: https://github.com/vuejs/vuex
線上文件: https://vuex.vuejs.org/zh-cn/
簡單來說: 對應用中元件的狀態進行集中式的管理(讀/寫)

2. 狀態自管理應用

state: 驅動應用的資料來源
view: 以宣告方式將state對映到檢視
actions: 響應在view上的使用者輸入導致的狀態變化(包含n個更新狀態的方法)

3. 多元件共享狀態的問題

多個檢視依賴於同一狀態
來自不同檢視的行為需要變更同一狀態
以前的解決辦法
	* 將資料以及操作資料的行為都定義在父元件
	* 將資料以及操作資料的行為傳遞給需要的各個子元件(有可能需要多級傳遞)
vuex就是用來解決這個問題的
 

4. vuex的核心概念

1). state

vuex管理的狀態物件
它應該是唯一的
const state = {
	xxx: initValue
}

2). mutations

包含多個直接更新state的方法(回撥函式)的物件
誰來觸發: action中的commit('mutation名稱')
只能包含同步的程式碼, 不能寫非同步程式碼
const mutations = {
	yyy (state, data) { 
		// 更新state的某個屬性
	}
}

3). actions

包含多個事件回撥函式的物件
通過執行: commit()來觸發mutation的呼叫, 間接更新state
誰來觸發: 元件中: $store.dispatch('action名稱')  // 'zzz'
可以包含非同步程式碼(定時器, ajax)
const actions = {
	zzz ({commit, state}, data1) {
		commit('yyy', data2)
	}
}
 

4). getters

包含多個計算屬性(get)的物件
誰來讀取: 元件中: $store.getters.xxx
const getters = {
	mmm (state) {
		return ...
	}
}

5). modules

包含多個module
一個module是一個store的配置物件
與一個元件(包含有共享資料)對應

6). 向外暴露store物件

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

7). 元件中:

import {mapGetters, mapActions} from 'vuex'
export default {
	computed: mapGetters(['mmm'])
	methods: mapActions(['zzz'])
}

{{mmm}} @click="zzz(data)"
 

8). 對映store

import store from './store'
new Vue({
	store
})

9). store物件

1.所有用vuex管理的元件中都多了一個屬性$store, 它就是一個store物件
2.屬性:
  state: 註冊的state物件
  getters: 註冊的getters物件
3.方法:
  dispatch(actionName, data): 分發action 

5. 將vuex引到專案中

1). 下載: npm install vuex --save

2). 使用vuex

1.store.js
	import Vuex from 'vuex'
	export default new Vuex.Store({
		state,
		mutations,
		actions,
		getters,
		modules
	})
2.main.js
	import store from './store.js'
	new Vue({
		store
	})