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

資訊專欄INFORMATION COLUMN

Vuex 入門到進(jìn)階

mylxsw / 2224人閱讀

先說一下Vuex到底是什么？ 
Vuex 是一個專門為 vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式


這個狀態(tài)我們可以理解為在 data 中的屬性，需要共享給其他組件使用的部分


也就是說，我們需要共享的數(shù)據(jù)，可以使用 vuex 進(jìn)行統(tǒng)一集中式的管理
喜歡看代碼學(xué)習(xí)的的可直接下載下方 Demo 
https://gitee.com/jiangliyue/...
Vuex中的五種基本對象 
state：存儲狀態(tài)（變量）


getters：對數(shù)據(jù)獲取之前的再次編譯，可以理解為 state 的計算屬性，我們在組件中使用 $store.getters.fun() 調(diào)用


mutations：修改狀態(tài)，并且是同步的。在組件中使用 $store.commit("操作名",params) 調(diào)用


actions：異步操作。在組件中使用 $store.dispatch("操作名") 調(diào)用


modules：store 的子模塊，為了開發(fā)大型項(xiàng)目，方便狀態(tài)管理而使用的，使用方法和上面一樣


// 常見vuex初始化配置
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        msg: "hello ",
        username: ""
    },
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})
在項(xiàng)目中使用 Vuex 
將上面初始化的 Vuex 對象引入到 main.js 文件中
// 引入store
import store from "@/store/index"
new Vue({
    store,
    render: h => h(App)
}).$mount("#app")
在組件中使用
現(xiàn)在我們已經(jīng)可以使用 Vuex 中的 state 了，接下來我們看看如何操作這個屬性 
Vuex 提供了 mutations 和 actions 兩種方法來操作 state

mutations（同步操作）

定義 mutations 對象里的方法，方法里面的參數(shù)，第一個默認(rèn)為 state，第二個為自定義傳入?yún)?shù)。
/**
 * mutations 里面放置的是我們操作state對象屬性的方法
 */
const mutations = {
    setMsg(state, name) {
        state.msg = "hellow" + name
    }
}
export default new Vuex.Store({
    state,
    mutations
})
組件中使用 Vuex 提供的 commit 方法調(diào)用 mutations 中我們自定義的方法
created() {
    this.setSayMsg("your Name")  
},
methods: {
    setSayMsg(name) {
      this.$store.commit("setMsg",name)
    }
}

效果如何大家自行實(shí)驗(yàn)哈~

actions（異步操作）

定義 actions 對象里的方法，方法里面的參數(shù)，第一個是context，它是一個和 store 對象具有相同對象屬性的參數(shù)，第二個為自定義傳入?yún)?shù)。  
通常當(dāng)我們需要修改多個狀態(tài)或者說調(diào)用多個 mutations 里的方法時會用到 actions
/**
 * actions 里面放置的是我們調(diào)用store對象的方法
 */
const actions = {
    // 常規(guī)寫法
    // actionsSetMsg(context, name) {
    //    context.commit("setMsg", name)
    // }
    // 簡化寫法
    actionsSetMsg({ commit }, name) {
        commit("setMsg", name)
    }
}
export default new Vuex.Store({
    state,
    actions
})
組件中使用 Vuex 提供的 dispatch 方法調(diào)用 actions 中我們自定義的方法
created() {
    this.actionsSetSayMsg("your Name")  
},
methods: {
    actionsSetSayMsg(name) {
        this.$store.dispatch("actionsSetMsg",name)
    }
}
最后是 getters，我們一般使用 getters 來獲取我們的 state，因?yàn)樗闶?state 的一個計算屬性，相當(dāng)于實(shí)時監(jiān)聽狀態(tài)變化 
定義 getters 對象里的方法
const getters = {
    getMsg(state) {
        return state.msg
    }
}
export default new Vuex.Store({
    state,
    getters
})
組件中使用
computed: {
    msg() {
        return this.$store.getters.getMsg
    }
}

看到這里如果上面的用法都能理解，那恭喜你的 Vuex 已經(jīng)學(xué)的很好了！

接下來的是官方提供給我們使用 Vuex 的一些小技巧 


mapState


mapMutations


mapActions


mapGetters




需要明確的是，這些方法只是方便我們書寫，重點(diǎn)還是上面的基礎(chǔ)部分


這部分用到了 es6 的擴(kuò)展運(yùn)算符，不熟悉的同學(xué)自行百度吧，還是蠻有用的


用法還是看下面代碼直接點(diǎn)，主要記住2點(diǎn)

引入都用到擴(kuò)展運(yùn)算符，即3個點(diǎn) "..." ，方式則為下面 2種模板任選一種


...mapState({
    你在該頁面想用的變量名: "你state對象里定義的屬性或方法名"
})
// 或者傳入一個數(shù)組,此時當(dāng)前組件調(diào)用的變量名與state中定義的方法名一致
...mapState(["你state對象里定義的屬性或方法名"])
另外記住 ...mapState({...}) 和 ...mapGetters({...}) 放在 computed 計算屬性里， ...mapMutations({...}) 和 ...mapActions({...})放在methods 方法屬性里就可以了
Demo Git 地址 
https://gitee.com/jiangliyue/...
最后，如果大家發(fā)現(xiàn)有什么問題，或者錯誤的地方，歡迎留言交流。

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

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

相關(guān)文章

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • ES6入門到進(jìn)階（二）：循環(huán)、數(shù)組、對象

    摘要：優(yōu)點(diǎn)按需加載可以寫中路徑也可以動態(tài)加以后默認(rèn)就是嚴(yán)格模式，默認(rèn)嚴(yán)格模式完參考視頻資料經(jīng)典入門到進(jìn)階 上一篇：ES6入門到進(jìn)階（一）：let、解構(gòu)賦值、字符串模板、函數(shù) 一、循環(huán) ES5里面新增一些東西 1.1 arr.forEach()(常用) 1. for for(let i=0; i [{t:aaaa}] let arr = [ ...

    JerryZou 評論0 收藏0

  • web前端工程師進(jìn)階指南

    摘要：進(jìn)階的知識的話就是響應(yīng)式這一塊了，一套代碼能適配手機(jī)是初級前端工程師的進(jìn)階，在北京工資一般在左右。進(jìn)階的知識應(yīng)該是這一塊了，當(dāng)然并不難，了解怎么與后臺交互是學(xué)習(xí)的關(guān)鍵點(diǎn)，在北京的工資一般在左右。 web前端？如果你是一名web前端工程師，那么你將感到幸運(yùn)，從之前的默默無聞，到后來的給后臺工程師打下手，再到巔峰一時。web前端可謂是當(dāng)下最火的職位之一。 showImg(https://s...

    曹金海 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<