# 章節引導 ***** [TOC] # 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 })