vue-store源碼實現(xiàn)(一)

入口文件分析

1. Vuex是一個插件,所以需要使用Vue的install方法來實現(xiàn)一個插件。

2. 說明Store是一個類,所以實現(xiàn)的時候需要實現(xiàn)一個Store類,然后有個構造器來接收傳過來的參數(shù)。

實現(xiàn)過程

1. 實現(xiàn)插件。和vue-router一樣,講$store掛載在原型上,這樣在vue組件內任意地方都可以使用this.$store。


2, 創(chuàng)建一個Store類,里面的構造器可以接收外部的傳參。

實現(xiàn)state: 做響應式狀態(tài)state屬性,然后用get 和set方法來處理。將data數(shù)據(jù)掛載在實例上, 之所以用$$state來接收options里面的state值,是因為不想用戶直接改變state的值。然后就可以用this._vm._data.$$state拿到state的值,返回出去就可以了。


實現(xiàn)commit:?

1. 定義變量接收options里面的mutations

2. 創(chuàng)建commit方法,根據(jù)傳過來的type(因為用戶使用時會傳一個值得,這個值就是mutations里面的方法名),這樣就可以拿到用戶需要調用的mutations的方法,我們傳參調用就可以了。因為mutations里面可以改變state的值,所以我們傳state的值進去。

3. 發(fā)現(xiàn)不能拿到state, 是因為this指向的原因,所以我們綁定上下文

實現(xiàn)dispatch:

1. 定義變量接收options里面的actions

2. 創(chuàng)建dispatch方法,根據(jù)傳過來的type(因為用戶使用時會傳一個值得,這個值就是dispatch里面的方法名),這樣就可以拿到用戶需要調用的dispatch的方法,我們傳參調用就可以了。因為dispatch里面第一個參數(shù)實際上是上下文,所以我們傳this進去就可以了。

3. 發(fā)現(xiàn)不能值, 是因為this指向的原因,所以我們綁定上下文


?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 2019-10-22 vue文檔 一、課程介紹 https://vuejs.lipengzhou.com/ 內容 ...
    欣簡書閱讀 587評論 0 1
  • 一、課程介紹 https://vuejs.lipengzhou.com/ 內容 使用 Vue.js 系列技術棧進行...
    她說東京很熱閱讀 319評論 0 0
  • vue文檔 一、課程介紹 https://vuejs.lipengzhou.com/ 內容 使用 Vue.js 系...
    chang_遇見緣閱讀 7,110評論 9 126
  • vue文檔 一、課程介紹 https://vuejs.lipengzhou.com/ 內容 使用 Vue.js 系...
    前端陳陳陳閱讀 311評論 0 1
  • 基礎部分 模版語法 1.computed和watch的區(qū)別 計算屬性computed :支持緩存,data數(shù)據(jù)不變...
    王蕾_fd49閱讀 681評論 0 0

友情鏈接更多精彩內容