vue-01

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