vuex的輔助函數(shù)如何用

本篇內(nèi)容介紹了“vuex的輔助函數(shù)如何用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)是專業(yè)的安次網(wǎng)站建設(shè)公司，安次接單;提供成都網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行安次網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

mapState

import { mapState } from 'vuex'

export default {
  // ...
  computed:{
     ...mapState({
         // 箭頭函數(shù)可使代碼更簡練
         count: state => state.count,
         // 傳字符串參數(shù) 'count' 等同于 `state => state.count`
         countAlias: 'count',

         // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
         countPlusLocalState (state) {
             return state.count + this.localCount
         }
  	})
  }
}

定義的屬性名與state中的名稱相同時(shí)，可以傳入一個(gè)數(shù)組

//定義state
const state={
    count:1,
}

//在組件中使用輔助函數(shù)
computed:{
    ...mapState(['count'])
}

mapGetters

computed:{
    ...mapGetters({
      // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
}

當(dāng)屬性名與getters中定義的相同時(shí)，可以傳入一個(gè)數(shù)組

computed:{
  computed: {
  // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

總結(jié)：

  • mapState與mapGetters都用computed來進(jìn)行映射

  • 在組件中映射完成后，通過this.映射屬性名進(jìn)行使用

mapMutations

methods:{
    ...mapMutations({
        add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
    })
}

當(dāng)屬性名與mapMutatios中定義的相同時(shí)，可以傳入一個(gè)數(shù)組

methods:{
    ...mapMutations([
        'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`

        // `mapMutations` 也支持載荷：
        'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
    ]),
}

mapActios

mathods:{
    ...mapActions({
        add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
    })
}

當(dāng)屬性名與mapActios中定義的相同時(shí)，可以傳入一個(gè)數(shù)組

methods:{
    ...mapActions([
        'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`	
        // `mapActions` 也支持載荷：
        'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
    ]),
}

總結(jié)

  • mapMutations與mapActios都在methods中進(jìn)行映射

  • 映射之后變成一個(gè)方法

多個(gè)modules

在不使用輔助函數(shù)的時(shí)候，

this.$store.commit('app/addCount')

使用輔助函數(shù)，輔助函數(shù)的第一個(gè)參數(shù)給定命名空間的路徑

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

或者使用 createNamespacedHelpers函數(shù)來創(chuàng)建一個(gè)基于命名空間的輔助函數(shù)

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') //給定路徑
//使用方法與之前相同
export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

“vuex的輔助函數(shù)如何用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)站欄目：vuex的輔助函數(shù)如何用
文章來源：http://bm7419.com/article18/gosogp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、軟件開發(fā)、微信小程序、面包屑導(dǎo)航、網(wǎng)站維護(hù)、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)