Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式骗随。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化拥娄。
實(shí)現(xiàn)原理：如果了解過(guò) vue-router 的實(shí)現(xiàn)原理蚊锹，就會(huì)發(fā)現(xiàn)瞳筏，兩者的實(shí)現(xiàn)幾乎一樣稚瘾，就是通過(guò) 全局混入 一個(gè)對(duì)象，在該對(duì)象的 beforeCreate 聲明周期函數(shù)中姚炕，對(duì)組件添加了一個(gè)屬性 $store摊欠，值就是使用 Vuex 時(shí)所創(chuàng)建的 Vuex 實(shí)例。
1柱宦、vuex 使用周期圖
官方原圖：
2些椒、使用 vuex
接下來(lái)將熟悉 vuex 的一些屬性和操作方法：
-
state定義狀態(tài)
-
this.$store.state[屬性]獲取狀態(tài)值 -
mapState()獲取所有狀態(tài)方法
-
mutations定義同步處理狀態(tài)
-
commit()觸發(fā) mutations 中的方法 -
mapMutations()獲取所有 mutations 中的方法
-
actions定義異步并調(diào)用 mutations 中的方法
-
dispatch()觸發(fā) actions 中的方法 -
mapActions()獲取所有 actions 中的方法
-
getters計(jì)算屬性可以處理多個(gè)狀態(tài)
-
this.$store.getters[名稱]獲取 getters 值 -
mapGetters()獲取所有 getters
-
modules掛載模塊
-
namespaced開啟命名空間
import Vue from 'vue';
import Vuex from 'vuex';
// 把 Vuex 注冊(cè)到 Vue 上
Vue.use(Vuex);
export default new Vuex.Store({
// 狀態(tài)
state: {
name: '張三',
age: 21,
},
// 用來(lái)處理狀態(tài)
mutations: {
SET_NAME(state, value) {
state.name = value;
},
SET_AGE(state, value) {
state.age = value;
},
},
// 用于異步處理
actions: {
setName({ commit }, value) {
commit('SET_NAME', value);
},
setAge({ commit }, value) {
commit('SET_AGE', value);
},
},
// vuex 的計(jì)算屬性
getters: {
resultName: state => `大家好我的名字叫${state.name}今年${state.age}歲`,
},
// 用來(lái)掛載模塊
modules: {},
});
代碼很簡(jiǎn)單，我們往 vuex 中加入了一個(gè) count 的數(shù)據(jù)掸刊，并且增加了這個(gè)數(shù)據(jù)的修改方法免糕。
2.1 State
獲取到 state 有兩種方式：
- 直接使用，this.$store.state[屬性]
<template>
<div id="app">
{{ this.$store.state.name }} {{ this.$store.state.age }}
</div>
</template>
- 使用 mapState
通過(guò) mapState 把 store 映射到組件的計(jì)算屬性忧侧，就相當(dāng)于組件內(nèi)部有了 state 里的屬性
<template>
<div id="app">
{{ count }}
</div>
</template>
<script>
// 從 Vuex 中導(dǎo)入 mapState
import { mapState } from 'vuex';
export default {
name: 'App',
computed: {
// 將 store 映射到當(dāng)前組件的計(jì)算屬性
...mapState(['name', 'age']),
},
};
</script>
當(dāng) store 中的值和當(dāng)前組件有相同的狀態(tài)石窑，我們可以在 mapState 方法里傳遞一個(gè)對(duì)象 而不是一個(gè)數(shù)組，在對(duì)象中給狀態(tài)起別名
computed: {
// name2 和 age2 都是別名
...mapState({ name2: 'name', age2: 'age'}])
}
2.2 Mutations
Vuex 官方：更改 Vuex 的 Store 中的狀態(tài)的唯一方法是提交 mutation蚓炬。
所以 Store 中的狀態(tài)不能直接對(duì)其進(jìn)行操作松逊，我們得使用 Mutation 來(lái)對(duì) Store 中的狀態(tài)進(jìn)行修改，雖然看起來(lái)有些繁瑣肯夏，但是方便集中監(jiān)控?cái)?shù)據(jù)的變化
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
name: '張三',
age: 21,
},
mutations: {
// 在這里定義 方法
/**
*
* @param {*} state 第一個(gè)參數(shù)是 Store 中的狀態(tài)(必須傳遞)
* @param {*} newName 傳入的參數(shù)
*/
SET_NAME(state, newName) {
// 建議使用常量來(lái)定義 mutations
// 這里簡(jiǎn)單舉個(gè)例子修改個(gè)名字
state.name = newName;
},
},
actions: {},
modules: {},
});
同樣有兩種方法在組件觸發(fā) mutations 中的方法：
- this.$store.commit() 觸發(fā)
<template>
<div id="app">
<button @click="handleClick">方式1 按鈕使用 mutations 中方法</button>
{{ name }}
</div>
</template>
<script>
// 從 Vuex 中導(dǎo)入 mapState
import { mapState } from 'vuex';
export default {
name: 'App',
computed: {
// 將 store 映射到當(dāng)前組件的計(jì)算屬性
...mapState(['name', 'age']),
},
methods: {
handleClick() {
// 觸發(fā) mutations 中的 SET_NAME
this.$store.commit('SET_NAME', '小明');
},
},
};
</script>
- 使用 mapMutations
<template>
<div id="app">
<button @click="SET_NAME('小明')">方式2 按鈕使用 mutations 中方法</button>
{{ name }}
</div>
</template>
<script>
// 從 Vuex 中導(dǎo)入 mapState
import { mapState, mapMutations } from 'vuex';
export default {
name: 'App',
computed: {
// 將 store 映射到當(dāng)前組件的計(jì)算屬性
...mapState(['name', 'age']),
},
methods: {
// 將 mutations 中的 changeName 方法映射到 methods 中经宏，就能直接使用了 changeName 了
...mapMutations(['SET_NAME']),
},
};
</script>
2.3 Actions
Action 和 Mutation 區(qū)別犀暑？
- mutation 必須是同步函數(shù)
- Action 提交的是 mutation，而不是直接變更狀態(tài)
- Action 可以包含任意異步操作
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
name: '張三',
age: 21,
},
mutations: {
// 在這里定義 方法
/**
*
* @param {*} state 第一個(gè)參數(shù)是 Store 中的狀態(tài)(必須傳遞)
* @param {*} newName 傳入的參數(shù)
*/
SET_NAME(state, newName) {
// 建議使用常量來(lái)定義 mutations
// 這里簡(jiǎn)單舉個(gè)例子修改個(gè)名字
state.name = newName;
},
},
actions: {
/**
*
* @param {*} context 上下文默認(rèn)傳遞的參數(shù)
* @param {*} newName 自己傳遞的參數(shù)
*/
// 定義一個(gè)異步的方法 context 是 store
changeNameAsync(context, newName) {
// 這里用 setTimeout 模擬異步
setTimeout(() => {
// 在這里調(diào)用 mutations 中的處理方法
context.commit('SET_NAME', newName)
}, 2000)
},
modules: {},
});
調(diào)用 Action 中的異步方法也是有兩種方式：
- this.$store.dispatch()
<template>
<div id="app">
<button @click="changeName2('小明')">方式1 按鈕使用 action 中方法</button>
{{ name }}
</div>
</template>
<script>
// 從 Vuex 中導(dǎo)入 mapState mapMutations
import { mapState, mapMutations } from 'vuex';
export default {
name: 'App',
computed: {
// 將 store 映射到當(dāng)前組件的計(jì)算屬性
...mapState(['name', 'age']),
},
methods: {
changeName2(newName) {
// 使用 dispatch 來(lái)調(diào)用 actions 中的方法
this.$store.dispatch('changeNameAsync', newName);
},
},
};
</script>
- 使用 mapActions
<template>
<div id="app">
<button @click="changeNameAsync('小浪')">
方式2 按鈕使用 action 中方法
</button>
{{ name }}
</div>
</template>
<script>
// 從 Vuex 中導(dǎo)入 mapState mapMutations mapActions
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
name: 'App',
computed: {
// 將 store 映射到當(dāng)前組件的計(jì)算屬性
...mapState(['name', 'age']),
},
methods: {
// 映射 actions 中的指定方法 到 methods中烁兰，就可以在該組件直接使用
...mapActions(['changeNameAsync']),
},
};
</script>
2.4 Getter
Getter 類似于計(jì)算屬性耐亏，但是我們的數(shù)據(jù)來(lái)源是 Vuex 中的 state, 所以就使用 Vuex 中的 Getter 來(lái)完成
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
name: '張三',
age: 21,
},
decorationName(state) {
return `大家好我的名字叫${state.name}今年${state.age}歲`;
},
});
當(dāng)然 Getter 也有兩種方式導(dǎo)入：
- this.$store.getters[名稱]
<template>
<div id="app">
{{ this.$store.getters.decorationName }}
</div>
</template>
- 使用 mapGetters
<template>
<div id="app">
{{ decorationName }}
</div>
</template>
<script>
// 從 Vuex 中導(dǎo)入 mapGetters
import { mapGetters } from 'vuex';
export default {
name: 'App',
computed: {
// 將 getter 映射到當(dāng)前組件的計(jì)算屬性
...mapGetters(['decorationName']),
},
};
</script>
2.5 Module
為了避免在一個(gè)復(fù)雜的項(xiàng)目 state 中的數(shù)據(jù)變得臃腫，Vuex 允許將 Store 分成不同的模塊缚柏，每個(gè)模塊都有屬于自己的 state苹熏，getter，action币喧，mutation
我們這里新建一個(gè) animal.js 文件
/* animal.js */
const state = {
animalName: '獅子',
};
const mutations = {
setName(state, newName) {
state.animalName = newName;
},
};
//導(dǎo)出
export default {
state,
mutations,
};
在 store/index.js 中的 modules 進(jìn)行掛載這個(gè)模塊
/* src/store/index.js */
import Vue from 'vue';
import Vuex from 'vuex';
// 引入模塊
import animal from './animal';
// 把 Vuex 注冊(cè)到Vue 上
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
animal,
},
});
然后我們就可以在組件中使用了
<template>
<div id="app">
{{ this.$store.state.animal.animalName }}
<button @click="$store.commit('setName', '老虎')">改名</button>
</div>
</template>
$store.state[在module中掛載的模塊名][掛載的模塊里的屬性]
是不是覺(jué)得這種模式很復(fù)雜
可以使用命名空間
/* animal.js */
const state = {
animalName: '獅子',
}
const mutations = {
setName(state, newName) {
state.animalName = newName
},
}
export default {
// 開啟命名空間 方便之后使用 mapXXX
namespaced: true,
state,
mutations,
}
3轨域、手寫一個(gè)簡(jiǎn)單的 Vuex
上面我們已經(jīng)介紹了 Vuex 的基本使用，現(xiàn)在我們來(lái)自己動(dòng)手寫個(gè)簡(jiǎn)單 Vuex
我們?cè)谑褂?vuex 的時(shí)候杀餐，可以注意到如下代碼：
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
...
})
這段代碼至少能夠說(shuō)明一下兩點(diǎn)：
- vuex 中有 install 方法干发，因?yàn)槭褂昧?Vue.use
- Vuex 里面應(yīng)該有個(gè) Store 的類，因?yàn)槲覀儗?dǎo)出的是 new Vuex.store
所以史翘，我們先初始化 vuex 如下：
let Vue = null;
function install(v) {
Vue = v;
}
class Store {
}
export default {
install,
Store
}
這個(gè)時(shí)候枉长，我們可以將 vuex 換成我們做自己的 vuex.js，如下：
// store/index.js
import Vue from 'vue';
// import Vuex from 'vuex';
// 新增代碼
import Vuex from './vue.js';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
SET_COUNT(state, value) {
state.count = value;
}
},
actions: {
setCount({commit},value) {
commit('SET_COUNT', value);
}
},
getters: {
resultCount: state => state.count
}
})
OK琼讽，到現(xiàn)在必峰，我們就可以自己去實(shí)現(xiàn) vuex 了。
3.1 實(shí)現(xiàn) $store
我們知道钻蹬，在每個(gè)組件中吼蚁，都可以通過(guò) this.$store來(lái)引入Store的實(shí)例，那么這個(gè)是怎么做到的呢问欠？
看過(guò) vue-router 原理的應(yīng)該清楚肝匆，這個(gè)和每個(gè)組件能夠使用 this.$router 是一樣的，都是在 install 方法中實(shí)現(xiàn)的顺献，原理就是全局混入旗国，在 beforeCreate 方法中掛載進(jìn)去。
現(xiàn)在注整，我們實(shí)現(xiàn)如下：
let Vue = null;
function install(v) {
Vue = v;
// 新增代碼
Vue.mixin({
beforeCreate() {
if(this.$options && this.$options.store) {
// 如果是根組件
this._root = this;
this._store = this.$options.store;
} else {
// 如果不是根組件
this._root = this.$parent && this.$parent._root;
}
}
});
// 定義 $store
Object.defineProperty(Vue.prototype, '$store', {
get() {
return this._root._store;
}
})
}
class Store {
}
export default {
install,
Store
}
很容易看出來(lái)能曾，我們首先判斷這個(gè)組件是不是根組件，如果是根組件肿轨，因?yàn)槲覀冊(cè)诟M件的時(shí)候通過(guò) new Vue({store}).options.store 拿到 store 的實(shí)例萝招。如果不是根組件蚂斤，那么我們通過(guò) this._root 去查找根組件。
那么槐沼，為什么我們?cè)谧咏M件能夠拿到父組件的數(shù)據(jù)呢曙蒸，答案很簡(jiǎn)單捌治，因?yàn)楦缸咏M件的掛載順序問(wèn)題，就不贅述了纽窟。
3.2 實(shí)現(xiàn) state
我們?cè)谑褂?vuex 的時(shí)候肖油，是以 state 數(shù)據(jù)為中心的，而顯然這個(gè)數(shù)據(jù)是響應(yīng)式的臂港，因?yàn)槲覀冊(cè)?Home 組件改變 count 值時(shí)森枪，Home 組件的 count 也變化了。
因?yàn)?vue 的 data 中的數(shù)據(jù)是響應(yīng)式的审孽，所以县袱，我們就很簡(jiǎn)單的通過(guò)將數(shù)據(jù)放入 vue 的 date 中，便可以實(shí)現(xiàn)效果佑力。
class Store {
// 新增代碼
constructor(options) {
let vm = new Vue({
data: {
state: options.state
}
});
// 使得 state 變成響應(yīng)式
this.state = vm.state;
}
}
3.3 實(shí)現(xiàn) mutations
我們?cè)谑褂?vuex 的時(shí)候式散，mutations 是個(gè)對(duì)象，然后里面的每個(gè)方法打颤，第一個(gè)參數(shù)都是 state暴拄，所以，
我們需要去規(guī)整一下傳入的 options编饺。
class Store {
constructor(options) {
let vm = new Vue({
data: {
state: options.state
}
});
// 使得 state 變成響應(yīng)式
this.state = vm.state;
// 新增代碼
// 規(guī)整 mutations
this.mutations = {};
let mutations = options.mutations || {};
Object.keys(mutations).forEach(mutation => {
this.mutations[mutation] = (params) => {
mutations[mutation].call(this, this.state, params);
}
});
}
}
3.4 實(shí)現(xiàn) actions
同樣的道理乖篷，我們?nèi)ヒ?guī)整 actions
class Store {
constructor(options) {
let vm = new Vue({
data: {
state: options.state
}
});
// 使得 state 變成響應(yīng)式
this.state = vm.state;
// 規(guī)整 mutations
this.mutations = {};
let mutations = options.mutations || {};
Object.keys(mutations).forEach(mutation => {
this.mutations[mutation] = (params) => {
mutations[mutation].call(this, this.state, params);
}
});
// 新增代碼
// 規(guī)整 actions
this.actions = {};
let actions = options.actions || {};
Object.keys(actions).forEach(action => {
this.actions[action] = (params) => {
actions[action].call(this, this, params);
}
});
}
}
3.5 實(shí)現(xiàn) getters
我們知道，getters 的數(shù)據(jù)是通過(guò) state 的數(shù)據(jù)計(jì)算所得透且。并且撕蔼，我們每次使用 state，都是調(diào)用了相關(guān)的函數(shù)石蔗。另外罕邀，getters 的數(shù)據(jù)也是響應(yīng)式的畅形。
class Store {
constructor(options) {
let vm = new Vue({
data: {
state: options.state
}
});
// 使得 state 變成響應(yīng)式
this.state = vm.state;
// 規(guī)整 mutations
this.mutations = {};
let mutations = options.mutations || {};
Object.keys(mutations).forEach(mutation => {
this.mutations[mutation] = (params) => {
mutations[mutation].call(this, this.state, params);
}
});
// 規(guī)整 actions
this.actions = {};
let actions = options.actions || {};
Object.keys(actions).forEach(action => {
this.actions[action] = (params) => {
actions[action].call(this, this, params);
}
});
// 新增代碼
// getters 也是一個(gè)函數(shù)养距， 并且 getters 的數(shù)據(jù)也是響應(yīng)式的，并且需要用到 state
this.getters = {};
let getters = options.getters || {};
Object.keys(getters).forEach(getter => {
Object.definProperty(this.getters, getter, {
get: () => {
return getters[getter].call(this, this.state);
}
})
})
}
}
現(xiàn)在日熬， 我們需要的四個(gè)屬性都已經(jīng)實(shí)現(xiàn)了棍厌。我們大概來(lái)捋一下邏輯：
- 對(duì)于 state，因?yàn)樗琼憫?yīng)式的竖席，所以我們通過(guò)實(shí)例一個(gè) vue耘纱，去通過(guò) vue 中的 data 來(lái)實(shí)現(xiàn)響應(yīng)式。
- 對(duì)于 mutations毕荐，因?yàn)?mutations 中的方法束析，每個(gè)的第一個(gè)參數(shù)都應(yīng)該是 state，所以我們通過(guò)遍歷用戶傳入的 mutations 的方法憎亚，每次執(zhí)行的時(shí)候员寇，都將 state 傳入作為第一個(gè)參數(shù)弄慰，將本身的參數(shù)作為第二個(gè)參數(shù)。
- 對(duì)于 actions蝶锋，因?yàn)?actions 中的方法陆爽，每個(gè)的第一個(gè)參數(shù)都是 Store 實(shí)例本身，所以我們通過(guò)遍歷用戶傳入的 actions 的方法扳缕，每次執(zhí)行的時(shí)候慌闭，都將 this 傳入作為第一個(gè)參數(shù)，將本身的參數(shù)作為第二個(gè)參數(shù)躯舔。
- 對(duì)于 getters驴剔，因?yàn)?getters 的數(shù)據(jù)也是響應(yīng)式的，所以我們通過(guò) Object.defineProperty 來(lái)遍歷用戶傳入的 getters粥庄，然后通過(guò)響應(yīng)式去執(zhí)行仔拟， 并且將 state 作為參數(shù)傳入。
3.6 實(shí)現(xiàn) commit
我們?cè)谑褂?vuex 的時(shí)候飒赃，都是通過(guò)例如 this.$store.commit('SET_COUNT'利花， 1) 這種方式，去實(shí)現(xiàn)數(shù)
據(jù)的修改载佳。所以我們需要去在增加一個(gè) commit 方法炒事。
class Store {
constructor(options) {
let vm = new Vue({
data: {
state: options.state
}
});
// 使得 state 變成響應(yīng)式
this.state = vm.state;
// 規(guī)整 mutations
this.mutations = {};
let mutations = options.mutations || {};
Object.keys(mutations).forEach(mutation => {
this.mutations[mutation] = (params) => {
mutations[mutation].call(this, this.state, params);
}
});
// 規(guī)整 actions
this.actions = {};
let actions = options.actions || {};
Object.keys(actions).forEach(action => {
this.actions[action] = (params) => {
actions[action].call(this, this, params);
}
});
// getters 也是一個(gè)函數(shù)， 并且 getters 的數(shù)據(jù)也是響應(yīng)式的蔫慧，并且需要用到 state
this.getters = {};
let getters = options.getters || {};
Object.keys(getters).forEach(getter => {
Object.definProperty(this.getters, getter, {
get: () => {
return getters[getter].call(this, this.state);
}
})
});
// 新增代碼
// 定義 commit
// 注意 不可以放在原型鏈挠乳，否則在 actions 的方法中直接調(diào)用 commit 會(huì)造成隱式丟失
this.commit = (type, params) => {
this.mutations[type, params);
}
}
}
這個(gè)方法極其簡(jiǎn)單，就是去調(diào)用我們剛剛規(guī)整完畢的 mutations 中的方法姑躲。
3.7 實(shí)現(xiàn) dispatch
我們?cè)谑褂?vuex 的時(shí)候睡扬，都是通過(guò)例如 this.$store.dispatch('setCount'， 1) 這種方式黍析，去實(shí)現(xiàn)數(shù)據(jù)的修改卖怜。所以我們需要去在增加一個(gè) dispatch 方法。
class Store {
constructor(options) {
let vm = new Vue({
data: {
state: options.state
}
});
// 使得 state 變成響應(yīng)式
this.state = vm.state;
// 規(guī)整 mutations
this.mutations = {};
let mutations = options.mutations || {};
Object.keys(mutations).forEach(mutation => {
this.mutations[mutation] = (params) => {
mutations[mutation].call(this, this.state, params);
}
});
// 規(guī)整 actions
this.actions = {};
let actions = options.actions || {};
Object.keys(actions).forEach(action => {
this.actions[action] = (params) => {
actions[action].call(this, this, params);
}
});
// getters 也是一個(gè)函數(shù)阐枣， 并且 getters 的數(shù)據(jù)也是響應(yīng)式的马靠，并且需要用到 state
this.getters = {};
let getters = options.getters || {};
Object.keys(getters).forEach(getter => {
Object.definProperty(this.getters, getter, {
get: () => {
return getters[getter].call(this, this.state);
}
})
});
// 定義 commit
// 注意 不可以放在原型鏈，否則在 actions 的方法中直接調(diào)用 commit 會(huì)造成隱式丟失
this.commit = (type, params) => {
this.mutations[type, params);
}
}
// 新增代碼
// 定義 dispatch 方法
dispatch(type, params) {
this.actions[type](params);
}
}
那么蔼两，到現(xiàn)在為止甩鳄，我們就可以將 vuex 換成我們現(xiàn)在自己實(shí)現(xiàn)的這個(gè)了，試試看额划，會(huì)發(fā)現(xiàn)效果一樣妙啃。
3.8 輔助函數(shù)
我們知道，vuex 還提供了類似 mapState俊戳，mapMutations揖赴，mapActions茁瘦，mapGetters 等輔助函數(shù)，其實(shí)實(shí)現(xiàn)也很簡(jiǎn)單储笑，我們就一
次性去實(shí)現(xiàn)了甜熔，代碼如下：
// mapState
// 這個(gè)我們是在 computed 中 mapState(['count'])，所以返回應(yīng)該是個(gè)對(duì)象突倍，對(duì)象里面是 key:fn
export function mapState(arr) {
let obj = {};
arr.forEach(item => {
obj[item] = function() {
return this.$store.state[item]
}
});
return obj;
}
// mapMutations
// 這個(gè)我們是在 methods 中 mapMutations(['SET_COUNT']),然后 this.SET_COUNT(2) 調(diào)用
export function mapMutations(arr) {
let obj = {};
arr.forEach(item => {
obj[item] = function(params) {
this.$store.commit(item, params);
}
});
return obj;
}
// mapActions
// 這個(gè)我們是在 methods 中 mapActions(['setCount']), 然后 this.setCount(2) 調(diào)用
export function mapActions(arr) {
let obj = {};
arr.forEach(item => {
obj[item] = function(params) {
this.$store.dispatch(item,params);
}
});
return obj;
}
// mapGetters
// 這個(gè)我們是在 computed 中 mapGetters(['resultCount'])腔稀，所以返回應(yīng)該是個(gè)對(duì)象，對(duì)象里面是 key:fn
export function mapGetters(arr) {
let obj = {};
arr.forEach(item => {
obj[item] = function(params) {
return this.$store.getters[item];
}
});
retrun obj;
}
上面的注釋寫明了實(shí)現(xiàn)的原理羽历，就不贅述了焊虏。
那么，vuex 的原理以及自己實(shí)現(xiàn) vuex 就完成了秕磷。
3.9 全部代碼
let Vue = null;
function install(v) {
Vue = v;
// 新增代碼
Vue.mixin({
beforeCreate() {
if(this.$options && this.$options.store) {
// 如果是根組件
this._root = this;
this._store = this.$options.store;
} else {
// 如果不是根組件
this._root = this.$parent && this.$parent._root;
}
}
});
// 定義 $store
Object.defineProperty(Vue.prototype, '$store', {
get() {
return this._root._store;
}
})
}
class Store {
constructor(options) {
let vm = new Vue({
data: {
state: options.state
}
});
// 使得 state 變成響應(yīng)式
this.state = vm.state;
// 規(guī)整 mutations
this.mutations = {};
let mutations = options.mutations || {};
Object.keys(mutations).forEach(mutation => {
this.mutations[mutation] = (params) => {
mutations[mutation].call(this, this.state, params);
}
});
// 規(guī)整 actions
this.actions = {};
let actions = options.actions || {};
Object.keys(actions).forEach(action => {
this.actions[action] = (params) => {
actions[action].call(this, this, params);
}
});
// getters 也是一個(gè)函數(shù)诵闭， 并且 getters 的數(shù)據(jù)也是響應(yīng)式的，并且需要用到 state
this.getters = {};
let getters = options.getters || {};
Object.keys(getters).forEach(getter => {
Object.definProperty(this.getters, getter, {
get: () => {
return getters[getter].call(this, this.state);
}
})
});
// 定義 commit
// 注意 不可以放在原型鏈澎嚣，否則在 actions 的方法中直接調(diào)用 commit 會(huì)造成隱式丟失
this.commit = (type, params) => {
this.mutations[type, params);
}
}
// 新增代碼
// 定義 dispatch 方法
dispatch(type, params) {
this.actions[type](params);
}
}
// mapState
// 這個(gè)我們是在 computed 中 mapState(['count'])疏尿，所以返回應(yīng)該是個(gè)對(duì)象，對(duì)象里面是 key:fn
export function mapState(arr) {
let obj = {};
arr.forEach(item => {
obj[item] = function() {
return this.$store.state[item]
}
});
return obj;
}
// mapMutations
// 這個(gè)我們是在 methods 中 mapMutations(['SET_COUNT']),然后 this.SET_COUNT(2) 調(diào)用
export function mapMutations(arr) {
let obj = {};
arr.forEach(item => {
obj[item] = function(params) {
this.$store.commit(item, params);
}
});
return obj;
}
// mapActions
// 這個(gè)我們是在 methods 中 mapActions(['setCount']), 然后 this.setCount(2) 調(diào)用
export function mapActions(arr) {
let obj = {};
arr.forEach(item => {
obj[item] = function(params) {
this.$store.dispatch(item,params);
}
});
return obj;
}
// mapGetters
// 這個(gè)我們是在 computed 中 mapGetters(['resultCount'])易桃，所以返回應(yīng)該是個(gè)對(duì)象褥琐，對(duì)象里面是 key:fn
export function mapGetters(arr) {
let obj = {};
arr.forEach(item => {
obj[item] = function(params) {
return this.$store.getters[item];
}
});
retrun obj;
}
export default {
install,
Store
}
4、總結(jié)
- Vuex 是 Vue 的一個(gè)插件晤郑，使用
Vue.use進(jìn)行安裝敌呈，Vuex 內(nèi)部實(shí)現(xiàn)了install方法和Store類。 -
install方法調(diào)用Vue.mixin()方法混入了beforeCreate()方法造寝，然后獲取到this.$options.store磕洪，并定義了$store屬性 - 在
Store類構(gòu)造函數(shù)中實(shí)現(xiàn)了state、mutations诫龙、actions析显、getters、commit的定義 - 在
Store類中定義了dispatch方法 - 在 Vuex 文件中定義了
mapState赐稽、mapMutations叫榕、mapActions浑侥、mapGetters等輔助函數(shù) -
state是定義狀態(tài)姊舵，可以使用this.$store.state和mapState來(lái)獲取 -
mutations是定義同步方法，可以使用commit和mapMutations來(lái)調(diào)用寓落，建議使用常量來(lái)定義 -
actions是定義異步方法括丁，可以使用dispatch和mapActions來(lái)調(diào)用，建議不要直接修改 state伶选，建議使用 commit 提交 mutations 中的方法來(lái)修改 state -
getters是計(jì)算屬性可以處理多個(gè)狀態(tài)史飞，可以使用this.$store.getters和mapGetters來(lái)獲取 -
modules是用來(lái)掛載模塊
