成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue.js-狀態(tài)管理與Vuex

lykops / 1657人閱讀

摘要：學(xué)習(xí)筆記狀態(tài)管理與狀態(tài)管理與非父子組件跨級(jí)組件和兄弟組件通信時(shí)，使用了中央事件總線的一個(gè)方法，用來(lái)觸發(fā)和接收事件，進(jìn)一步起到通信的作用。倉(cāng)庫(kù)包含了應(yīng)用的數(shù)據(jù)狀態(tài)和操作過(guò)程。新建文件，并寫(xiě)入的配置，會(huì)依賴此配置文件來(lái)使用編譯代碼。

學(xué)習(xí)筆記：狀態(tài)管理與Vuex
狀態(tài)管理與Vuex

非父子組件（跨級(jí)組件和兄弟組件）通信時(shí)，使用了bus（中央事件總線）的一個(gè)方法，用來(lái)觸發(fā)和接收事件，進(jìn)一步起到通信的作用。

一個(gè)組件可以分為數(shù)據(jù)（model）和視圖（view），數(shù)據(jù)更新時(shí)，視圖也會(huì)自動(dòng)更新。在視圖中又可以綁定一個(gè)事件，它們觸發(fā)methods里指定的方法，從而可以改變數(shù)據(jù)、更新視圖，這是一個(gè)組件基本的運(yùn)行模式。

const store = new Vuex.Store({});

倉(cāng)庫(kù)store包含了應(yīng)用的數(shù)據(jù)（狀態(tài)）和操作過(guò)程。Vuex里的數(shù)據(jù)都是響應(yīng)式的，任何組件使用同一store的數(shù)據(jù)時(shí)，只要store的數(shù)據(jù)變化，對(duì)應(yīng)的組件也會(huì)立即更新。

數(shù)據(jù)保存在Vuex選項(xiàng)的state字段內(nèi)。

const store = new Vuex.Store({
    state: {
        count: 0
    }
});

在任何組件內(nèi)，可以直接通過(guò)$store.state.count讀取。

直接卸載template里顯得有點(diǎn)亂，可以用一個(gè)計(jì)算屬性來(lái)顯示：


    
首頁(yè)

    {{count}}



export default {
    computed: {
        count() {
            return $store.state.count;
        }
    }
}

在組件內(nèi)來(lái)自store的數(shù)據(jù)只能讀取，不能手動(dòng)修改，修改store中數(shù)據(jù)的唯一途徑是顯式地提交mutations。

mutations是Vuex的第二個(gè)選項(xiàng)，用來(lái)直接修改state里的數(shù)據(jù)。

在組件內(nèi)，通過(guò)this.$store.commit方法來(lái)執(zhí)行mutations。

mutations還可以接受第二個(gè)參數(shù)，可以是數(shù)字、字符串或?qū)ο蟮阮?lèi)型。

ES6語(yǔ)法

函數(shù)的參數(shù)可以設(shè)定默認(rèn)值，當(dāng)沒(méi)有傳入該參數(shù)時(shí)，使用設(shè)置的值。

increment(state,n=1)等同于：
    increment(state,n){
        n=n||1;
    }

提交mutations的另一種方式是直接使用包含type屬性的對(duì)象。

mutations里盡量不要異步操作數(shù)據(jù)，否則組件在commit后數(shù)據(jù)不能立即改變，而且不知道什么時(shí)候會(huì)改變。
高級(jí)用法

Vuex還有其他3個(gè)選項(xiàng)可以使用：getter、actions、modules。

getter能將computed的方法提取出來(lái)，也可以依賴其他的getter，把getter作為第二個(gè)參數(shù)。

action與mutation很像，不同的是action里面提交的是mutation，并且可以一步操作業(yè)務(wù)邏輯。

action在組件內(nèi)通過(guò)$store.dispatch觸發(fā)。

modules用來(lái)將store分割到不同模塊，當(dāng)項(xiàng)目足夠大時(shí)，store里的state、getters、mutations、actions會(huì)非常多，使用modules可以把它們寫(xiě)到不同的文件中。

module的mutation和getter接收的第一個(gè)參數(shù)state是當(dāng)前模塊的狀態(tài)。在actions和getters中還可以接收一個(gè)參數(shù)rootState，來(lái)訪問(wèn)根節(jié)點(diǎn)的狀態(tài)。

實(shí)戰(zhàn)：中央事件總線插件vue-bus

中央事件總線bus作為一個(gè)簡(jiǎn)單的組件傳遞事件，用于解決跨級(jí)和兄弟組件通信的問(wèn)題。

vue-bus插件給Vue添加一個(gè)屬性$bus，并代理$emit、$on、$off三個(gè)方法。

ES6語(yǔ)法

emit(event,..args)中的...是函數(shù)參數(shù)的解構(gòu)。因?yàn)椴恢澜M件會(huì)傳遞多少個(gè)參數(shù)進(jìn)來(lái)，使用...args可以把從當(dāng)前參數(shù)到最后的參數(shù)都獲取到。

使用vue-bus有兩點(diǎn)需要注意：

第一是$bus.on應(yīng)該在created鉤子內(nèi)使用，如果在mounted使用，它可能接收不到其他組件來(lái)自created鉤子內(nèi)發(fā)出的事件；

第二點(diǎn)是使用了$bus.on在beforeDestroy鉤子里應(yīng)該再使用$bus.off解除，因?yàn)榻M件銷(xiāo)毀后，就沒(méi)有必要把監(jiān)聽(tīng)的句柄存儲(chǔ)在vue-bus中。

Vue插件

注冊(cè)插件需要一個(gè)公開(kāi)的方法install，它的第一個(gè)參數(shù)時(shí)Vue構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象。

See the Pen Vue插件 by whjin (@whjin) on CodePen.


$router還有其他一些方法：

replace 類(lèi)似于的replace功能，它不會(huì)向history添加新紀(jì)錄，而是替換掉當(dāng)前的history記錄，如this.$router.replace("/user/123")

go 類(lèi)似于window.history.go()，在history記錄中向前或后退多少步，參數(shù)是整數(shù)

高級(jí)用法

在SPA項(xiàng)目中，如何修改網(wǎng)頁(yè)的標(biāo)題？

在頁(yè)面發(fā)生路由變化時(shí)，統(tǒng)一設(shè)置。

vue-router提供了導(dǎo)航鉤子beforeEach和afterEach，它們會(huì)在路由即將改變前和改變后觸發(fā)，所以設(shè)置標(biāo)題可以在beforeEach鉤子完成。

See the Pen vue-router導(dǎo)航鉤子 by whjin (@whjin) on CodePen.


新建.babelrc文件，并寫(xiě)入babel的配置，webpack會(huì)依賴此配置文件來(lái)使用babel編譯ES6代碼。

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"],
  "comments": false
}

每個(gè).vue文件代表一個(gè)組件，組件之間可以相互依賴。

ES語(yǔ)法：

=>是箭頭函數(shù)

render: h=>h(App)等同于
    render: function(h) {
        return h(App)
    }
    
也等同于：
    render: h=>{
        return h(App)
    }

箭頭函數(shù)里的this指向與普通函數(shù)不一樣，箭頭函數(shù)體內(nèi)的this對(duì)象就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102655.html

相關(guān)文章

  • Vue學(xué)習(xí)日記（四）——Vue狀態(tài)管理vuex

    摘要：說(shuō)實(shí)在話，我在閱讀文檔的時(shí)候，也很難以去理解，甚至覺(jué)得沒(méi)有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說(shuō)法就是是一個(gè)專為應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。 前言 先說(shuō)句前話，如果不是接觸大型項(xiàng)目，不需要有多個(gè)子頁(yè)面，不使用vuex也是完全可以的。 說(shuō)實(shí)在話，我在閱讀vuex文檔的時(shí)候，也很難以去理解v...

    fai1017 評(píng)論0 收藏0

  • Vue學(xué)習(xí)日記（四）——Vue狀態(tài)管理vuex

    摘要：說(shuō)實(shí)在話，我在閱讀文檔的時(shí)候，也很難以去理解，甚至覺(jué)得沒(méi)有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說(shuō)法就是是一個(gè)專為應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。 前言 先說(shuō)句前話，如果不是接觸大型項(xiàng)目，不需要有多個(gè)子頁(yè)面，不使用vuex也是完全可以的。 說(shuō)實(shí)在話，我在閱讀vuex文檔的時(shí)候，也很難以去理解v...

    zilu 評(píng)論0 收藏0

  • Vue學(xué)習(xí)日記（四）——Vue狀態(tài)管理vuex

    摘要：說(shuō)實(shí)在話，我在閱讀文檔的時(shí)候，也很難以去理解，甚至覺(jué)得沒(méi)有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說(shuō)法就是是一個(gè)專為應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。 前言 先說(shuō)句前話，如果不是接觸大型項(xiàng)目，不需要有多個(gè)子頁(yè)面，不使用vuex也是完全可以的。 說(shuō)實(shí)在話，我在閱讀vuex文檔的時(shí)候，也很難以去理解v...

    fjcgreat 評(píng)論0 收藏0

  • Vue.js狀態(tài)管理模式 Vuex

    摘要：是一個(gè)專為應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。通過(guò)方法觸發(fā)在內(nèi)部執(zhí)行異步操作對(duì)象形式傳參以載荷形式分發(fā) showImg(https://segmentfault.com/img/bVDxBu?w=701&h=551); vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理...

    Codeing_ls 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<