Vuex怎麼用（1）

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