let Vue
class Store {
constructor(optoins) {
this._mutations = optoins.mutations
this.actions = optoins.actions
this.commit = this.commit.bind(this)
this.dispatch = this.dispatch.bind(this)
this.wrapperGetters = optoins.getters;
const computed = {}
this.getters = {}
const store = this
Object.keys(this.wrapperGetters).forEach((key) => {
const fn = this.wrapperGetters[key];
//vue實例computed沒有參數(shù),但是getters中的函數(shù)是有參數(shù)的厘唾，默認傳入state,所以做一層包裹處理
computed[key] = function() {
return fn(store.state)
}
Object.defineProperty(store.getters, key, {
get() {
return store._vm[key]
},
})
})
//借vue實現(xiàn)store中數(shù)據(jù)的響應式
this._vm = new Vue({
data: {
state: optoins.state,
},
computed,
})
}
get state() {
return this._vm.state
}
//設置state不能修改
set state(val) {
console.error('no allowed to modify state')
}
commit(type, payload) {
const entry = this._mutations[type]
if (!entry) {
return console.error('unknow mutations type:' + type)
}
entry(this.state, payload)
}
dispatch(type, payload) {
let entry = this.actions[type]
if (!entry) {
return console.error('unknow actions type:' + type)
}
//傳遞一個上下文,其實就是當前的store實例
entry(this, payload)
}
}
function install(_vue) {
Vue = _vue
Vue.mixin({
beforeCreate() {
if (this.$options.store) {
Vue.prototype.$store = this.$options.store
}
},
})
}
export default { Store, install }
實現(xiàn)一個vuex
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門梨与，熙熙樓的掌柜王于貴愁眉苦臉地迎上來堕花，“玉大人，你說我怎么就攤上這事粥鞋≡低欤” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵呻粹，是天一觀的道長壕曼。 經常有香客問我，道長等浊，這世上最難降的妖魔是什么腮郊？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮筹燕，結果婚禮上伴榔，老公的妹妹穿的比我還像新娘纹蝴。我一直安慰自己，他們只是感情好踪少，可當我...
- 文/花漫 我一把揭開白布塘安。 她就那樣靜靜地躺著，像睡著了一般援奢。 火紅的嫁衣襯著肌膚如雪兼犯。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼诗芜，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了埃疫？” 一聲冷哼從身側響起伏恐，我...
- 正文 年R本政府宣布督勺，位于F島的核電站渠羞，受9級特大地震影響，放射性物質發(fā)生泄漏智哀。R本人自食惡果不足惜次询，卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瓷叫。 院中可真熱鬧屯吊，春花似錦送巡、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蔽介，卻和暖如春摘投，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背虹蓄。 一陣腳步聲響...
推薦閱讀更多精彩內容
- 好久沒有寫博客了，就最近寫的一些東西給大家做一個分享要實現(xiàn)的就是這種效果 我是個菜鳥累铅，初學vue還不太懂到底要怎么...
- 最近開始著手學習 Vue，先大略的過了一遍官方文檔站叼，跟著敲過一部分官方文檔中的 DEMO娃兽，然而還是不甚了了。在網(wǎng)上...
- 借鑒1 https://www.ahwgs.cn/vuex-loading-plugin.html借鑒2https...
- 所謂動態(tài)菜單尽楔，就是菜單數(shù)據(jù)從后臺加載投储，前端接收到的是一個JSON，前端代碼解析后渲染相應的菜單信息阔馋，相應的路由也應...
