vuex 1.0 vue1的版本
vuex 是對vue中的數(shù)據(jù)源狀態(tài)進(jìn)行管理的框架
vuex的圖解
vuex就是一個全局對象 統(tǒng)一管理數(shù)據(jù) 方便頁面和組件之間的數(shù)據(jù)傳遞
引用文檔
- vuex 最重要的一條 組件永遠(yuǎn)都不應(yīng)該直接更改Vuex store的狀態(tài). store的狀態(tài)必須通過mutation handler(變更句柄)中管理
- Vuex 使用的是 單一狀態(tài)作用樹 用一個對象包含全部的應(yīng)用層級狀態(tài). 每個應(yīng)用將僅僅包含1個store實例 和(EXTJS不同)
- vuex 應(yīng)用的核心就是 store (倉庫) .store 本質(zhì)就是一個容器 包含中應(yīng)用中的大部分狀態(tài)(state) store的狀態(tài)是全局容器.
store 全局 倉儲
- Vuex 的狀態(tài)存儲是響應(yīng)式的. 當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候, 若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地高效地得到更新.
- 你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地分發(fā) 狀態(tài)變更事件(explicitly dispatching mutations)知给。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化杈笔，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用浅碾。
最簡單的 store
注意：我們將會在后續(xù)的文檔中用 ES2015 語法進(jìn)行案例展示夹囚。如果你還沒能掌握 ES2015部念，你得抓緊了舞痰！本文同樣假設(shè)你已經(jīng)了解了 Vue 本體的官方文檔中構(gòu)建大型應(yīng)用章節(jié)所涉及的概念.
創(chuàng)建 Vuex store 的過程相當(dāng)直截了當(dāng) - 只要提供一個初始化的 state 對象土榴，以及一些 mutations：
import Vuex from 'vuex'
const state = {
count: 0
}
const mutations = {
INCREMENT (state) {
state.count++
}
}
export default new Vuex.Store({
state,
mutations
})
現(xiàn)在，你可以通過 store.state 來讀取 state 對象响牛，還可以通過 dispatch 某 mutation 的名字來觸發(fā)這些狀態(tài)變更：
store.dispatch('INCREMENT')
console.log(store.state.count) // -> 1
如果你傾向于對象風(fēng)格的分發(fā)方式玷禽，你可以用這種語法：
// 效果同上
store.dispatch({
type: 'INCREMENT'
})
Mutations
import Vuex from 'vuex'
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
INCREMENT (state) {
// 改變 state
state.count++
}
}
})
用全部大寫命名 mutation 是一個慣例，方便將它和 actions 區(qū)分開呀打。
你不能直接調(diào)用 mutation handler. 這里傳入 Store 構(gòu)造函數(shù)的選項更像是在注冊事件回調(diào)：『當(dāng) INCREMENT 事件被觸發(fā)時矢赁，調(diào)用這個 handler』。觸發(fā) mutation handler 的方法是 dispatch 一個 mutation 的事件名：
store.dispatch('INCREMENT')
帶參數(shù)的 dispatch
store.dispatch 可以接受額外的參數(shù)：
// ...
mutations: {
INCREMENT (state, n) {
state.count += n
}
}
store.dispatch('INCREMENT', 10)
這里的 10 會緊跟著 state 作為第二個參數(shù)被傳遞到 mutation handler. 所有額外的參數(shù)被稱為該 mutation 的 payload.
mutations 必須是同步函數(shù)
Actions 是用于分發(fā)mutations的函數(shù)
Vuex.Store 實例屬性
state
type: Object
根 state贬丛，只讀撩银。
Vuex.Store 實例方法
dispatch(mutationName: String, ...args)
直接觸發(fā)一個 mutation。在一些特殊情況下會需要用到這個方法豺憔，但通常來說额获，在組件中應(yīng)當(dāng)盡量通過調(diào)用 actions 來觸發(fā) mutation。
watch(pathOrGetter: String|Function, cb: Function, [options: Object])
監(jiān)聽一個 path 或 getter 的值恭应，當(dāng)值發(fā)生改變時觸發(fā)回調(diào)抄邀。接受與 vm.$watch 方法相同的配置選項作為可選參數(shù)。
執(zhí)行返回的 handle function 結(jié)束監(jiān)聽昼榛。
hotUpdate(newOptions: Object)
熱更新 actions 和 mutations撤摸。
