vuex簡單原始碼實現

let vue // 在變數宣告 不然會儲存

class
store
// vue.store({}) 對應使用結構 
// export default install用於use外掛程式))
this
.getters =
// 初始化物件 用於獲取store裡面的getters屬性 
this
.mutations = option.mutations // 獲取store裡面的mutations屬性
// 改變狀態 **this.store.commit(state,data)**
this
.actions = option.actions // 獲取store裡的actions屬性
// 非同步執行mutations **this.store.dispatch(store,data)**
this
.handleget
(option.getters)
// 獲取store.getters.val
this
.commit =
this
.commit
.bind
(this
)// 繫結this避免元件this呼叫改變指向 返回可以執行函式
this
.dispatch =
this
.dispatch
.bind
(this
)// 如上
}handleget
(get))
})}commit
(type, payload
)dispatch
(type,payload
)// 所以可以執行非同步執行同步執行初始化獲取倉庫}}
const
install=(
_vue
)=>
}就可以直接使用
// this.$store.getters dispatch commit state
vue.prototype.$store =
this
.$options.store
}}})}
export
default

new

vue().
$mount
()

import vue from

'vue'
import vuex from
'./vue'
// 自定義vuex 外掛程式
vue.
use(vuex)
// 注入外掛程式 如果是物件 use會執行install函式
下面是結構
export
default
newvuex.store(,
mutations:},
actions:},
modules:
, getters:}}
)

="home"
>
}}"but"
>加<
/button>
<
/div>
<
/template>
// @ is an alias to /src
import helloworld from
'@/components/helloworld.vue'
export
default
, methods:}}
<
/script>

vuex原始碼實現

let vue 自定義foreach迴圈 author suzhe datetime 2019 07 28t11 12 17 0800 param obj description param classback description const foreach obj,classback 格式化模...

vuex原始碼解析及簡單實現

目錄 三 刻畫vuex 的大致結構 四 完成 install 方法 五 完成 store 中的 state 六 完成 store 中的 getters 七 完成 store 中的 mutations 八 完成 store 中的 commit 九 完成 store 中的 actions store i...

vuex 原始碼分析 vuex原始碼解讀 簡易實現

原始碼解讀 開始之前，先貼個大綱 首先，我們從使用方法入手，一步步來看 store.js import vue from vue import vuex from vuex vue.use vuex export default new vuex.store data 2000 main.js im...