vuex的一些知識點
vuex是vue的狀態(tài)管理工具通過安裝
npm install vuex --save
vuex是一個專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)墓懂，并以相應(yīng)的規(guī)則保證以一種可預(yù)測的方式發(fā)生變化踪少，類似于本地存儲
store是每一個vuex應(yīng)用的核心就是store（倉庫）基本可以想象為一個容器外驱，它包含著你的應(yīng)用中大部分的狀態(tài)贱鄙，vuex和單純的全局對象有以下兩點不同
- 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)唯一途徑就是顯式的提交mutation嫉拐，這樣使得我們可以方便的追蹤每一個狀態(tài)的變化哩都，從而讓我們實現(xiàn)一些工具幫助我們更好的理解我們的應(yīng)用
state
Vuex通過store選項，提供了一種機制將狀態(tài)從根組件“注入”到每一個子組件（調(diào)用Vue.use(Vuex)）
使用腳手架搭建起來項目后在main.js中引入Vuex
import Vue from 'vue'
import App from './App'
// import router from './router'
import store from './vuex/store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
// router,
store,
components: { App },
template: '<App/>'
})
通過在根實例中注冊store選項婉徘，該store實例會注入到根組件下的所有子組件中漠嵌，且子組件能通過this.$store訪問到
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
更改vuex的store中的狀態(tài)的唯一方法是提交mutation Vuex中的mutation都有一個字符串中的事件類型和一個回調(diào)函數(shù)，這個回調(diào)函數(shù)就是我們實際進(jìn)行狀態(tài)改變的地方盖呼，并且他會接受state作為第一個參數(shù)
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 變更狀態(tài)
state.count++
}
}
})
不能直接調(diào)用mutations handler儒鹿，這個選項更像是事件注冊：“當(dāng)觸發(fā)一個類型為increment”的mutation時，是要使用
store.commit('increment')
提交載荷
可以向store.commit傳入額外的參數(shù)几晤，即mutation 的載荷
// ...
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
在大多數(shù)情況下约炎，載荷應(yīng)該是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀：
// ...
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit('increment', {
amount: 10
})
對象風(fēng)格的提交方式
store.commit({
type: 'increment',
amount: 10
})
Action
Action類似于mutation 不同在于
- Action 提交的時mutation 而不是直接變更狀態(tài)
- Action可以包含任意異步操作
注冊一個簡單的aciton
讓我們來注冊一個簡單的action
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action 函數(shù)接受一個與store 實例具有相同方法和屬性的context對象，因此你可以調(diào)用context.commit提交一個mutation 或者通過context.state和context.getters來獲取state和getters 實踐中我們經(jīng)常用到參數(shù)結(jié)構(gòu)來簡化代碼
actions: {
increment ({ commit }) {
commit('increment')
}
}
分發(fā)Action
Action通過 store.dispatch 方法觸發(fā)：
store.dispatch('increment')
Actions 支持同樣的載荷方式和對象方式進(jìn)行分發(fā)：
// 以載荷形式分發(fā)
store.dispatch('incrementAsync', {
amount: 10
})
// 以對象形式分發(fā)
store.dispatch({
type: 'incrementAsync',
amount: 10
})
在組件中分發(fā) Action
在組件中使用this.$store.dispatch('xxx')分發(fā)action
Module
由于使用單一狀態(tài)樹圾浅，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象掠手，當(dāng)應(yīng)用變得非常復(fù)雜時，store對象就有可能變得臃腫
為了解決以上問題狸捕，Vuex允許我們將store分割成模塊喷鸽，每個模塊擁有自己的state、mutation灸拍、action做祝、getter 甚至是嵌套子模塊
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)
參考資料：
Vuex
