vue和vuex中的ES6 Shorthand method names

focusj 發(fā)布于2019-08-21 17:18 / 1244人閱讀

摘要：最近在用和開(kāi)發(fā)。最后查到其實(shí)并不是計(jì)算屬性，而是而計(jì)算屬性其實(shí)是這樣的仔細(xì)對(duì)比和。所以這個(gè)語(yǔ)法糖其實(shí)就是，省略了，省略了冒號(hào)和。雖然這個(gè)不是很甜，但好歹是個(gè)糖，糖多了自己寫(xiě)的別人就看不懂了。而人們往往對(duì)于不懂的東西，都會(huì)說(shuō)逃

最近在用vue和vuex開(kāi)發(fā)。
在.vue單文件的生命周期和vuex的actions定義中，有兩段代碼讓人費(fèi)解：
pag.vue

export default {
    //...
    created(){
        this.$store.dispatch("getUsersSize")
    }
    //...
}

action.js中

const actions = {
    getAllUsers({commit},url){
        dataapi.getData(url,(users)=>{
            commit(types.RECEIVE_USERS,{users})
        })
    }
}

抽離出來(lái)就是{created(){}}和{getAllUsers({commit},url){}}
正常情況下，如果將函數(shù)賦值到對(duì)象的屬性值，簡(jiǎn)稱(chēng)為方法，應(yīng)該這樣寫(xiě)才對(duì)：
{created:function(){}}以及{getAllUsers:function({commit},url){}}

所以我很納悶這是什么鬼東西？

印象中ES6有個(gè)概念叫computed property，于是去查MDN。
最后查到其實(shí)并不是計(jì)算屬性，而是shorthand methods names

// Shorthand method names (ES2015)
var o = {
  property([parameters]) {}
};

而計(jì)算屬性其實(shí)是這樣的：

// Computed property names (ES2015)
var prop = "foo";
var o = {
  [prop]: "hey",
  ["b" + "ar"]: "there"
};

仔細(xì)對(duì)比{created(){}}和{created:function(){}}。
所以這個(gè)ES6 Shorthand method names語(yǔ)法糖其實(shí)就是，省略了":function"，省略了冒號(hào)和"function"。
雖然這個(gè)sugar不是很甜，但好歹是個(gè)糖，糖多了自己寫(xiě)的bug別人就看不懂了。
而人們往往對(duì)于不懂的東西，都會(huì)說(shuō)：666
(逃

云服務(wù)器 GPU云服務(wù)器 Vue_Vuex es6中的class es6中的promise Shorthand

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/89371.html

相關(guān)文章

vuex的使用

摘要：使用狀態(tài)對(duì)象的訪(fǎng)問(wèn)我把理解成構(gòu)造器中的里面存放一些數(shù)據(jù)，例如用戶(hù)姓名性別身份證號(hào)等等。 vuex是配合vue一塊兒使用的一個(gè)狀態(tài)管理工具。我通常使用它來(lái)保存一些全局的數(shù)據(jù)，例如用戶(hù)登錄信息，用戶(hù)身份信息，總之一些在很多頁(yè)面都會(huì)使用到的信息，都保存在vuex里面，用的時(shí)候就不需要再去請(qǐng)求接口了，直接去vuex里面拿就可以了。先放官網(wǎng)地址安裝 npm install vuex --sav...

tunny 2019-08-22 16:28 評(píng)論0 收藏0
vuex的使用

摘要：使用狀態(tài)對(duì)象的訪(fǎng)問(wèn)我把理解成構(gòu)造器中的里面存放一些數(shù)據(jù)，例如用戶(hù)姓名性別身份證號(hào)等等。 vuex是配合vue一塊兒使用的一個(gè)狀態(tài)管理工具。我通常使用它來(lái)保存一些全局的數(shù)據(jù)，例如用戶(hù)登錄信息，用戶(hù)身份信息，總之一些在很多頁(yè)面都會(huì)使用到的信息，都保存在vuex里面，用的時(shí)候就不需要再去請(qǐng)求接口了，直接去vuex里面拿就可以了。先放官網(wǎng)地址安裝 npm install vuex --sav...

lemon 2019-08-02 10:14 評(píng)論0 收藏0
Vuex源碼閱讀筆記

摘要：而鉆研最好的方式，就是閱讀的源代碼。整個(gè)的源代碼，核心內(nèi)容包括兩部分。逃而動(dòng)手腳的代碼，就存在于源代碼的中。整個(gè)源代碼讀下來(lái)一遍，雖然有些部分不太理解，但是對(duì)和一些代碼的使用的理解又加深了一步。筆記中的Vue與Vuex版本為1.0.21和0.6.2,需要閱讀者有使用Vue，Vuex，ES6的經(jīng)驗(yàn)。起因俗話(huà)說(shuō)得好，沒(méi)有無(wú)緣無(wú)故的愛(ài)，也沒(méi)有無(wú)緣無(wú)故的恨，更不會(huì)無(wú)緣無(wú)故的去閱讀別人的源...

hosition 2019-08-21 13:44 評(píng)論0 收藏0
Vuex 入門(mén)到進(jìn)階

先說(shuō)一下Vuex到底是什么？ Vuex 是一個(gè)專(zhuān)門(mén)為 vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式這個(gè)狀態(tài)我們可以理解為在 data 中的屬性，需要共享給其他組件使用的部分也就是說(shuō)，我們需要共享的數(shù)據(jù)，可以使用 vuex 進(jìn)行統(tǒng)一集中式的管理喜歡看代碼學(xué)習(xí)的的可直接下載下方 Demo https://gitee.com/jiangliyue/... Vuex中的五種基本對(duì)象 state...

mylxsw 2019-08-23 18:30 評(píng)論0 收藏0
[新手坑] 03.Vue-CLI用ES6編碼仍需要手動(dòng)安裝一些Babel插件

摘要：用編碼仍需要手動(dòng)安裝一些插件這五一幾天沒(méi)什么事情想著再深入研究下然后又找了些教程結(jié)合官方文檔研究卻遇到了一個(gè)坑爹的問(wèn)題在安裝完成后如果需要用到一些語(yǔ)法編寫(xiě)代碼有時(shí)候報(bào)錯(cuò)的話(huà)可能是缺少編譯插件比如我在看文檔和部分教程的時(shí)候有類(lèi)似這樣的代碼 Vue-CLI用ES6編碼仍需要手動(dòng)安裝一些Babel插件這五一幾天, 沒(méi)什么事情, 想著再深入研究下Vuex, 然后又找了些教程, 結(jié)合官方文檔研...

lwx12525 2019-08-26 11:52 評(píng)論0 收藏0