亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

VUEX?使用?mutations的兩種方式

 更新時(shí)間:2023年01月17日 08:33:56   作者:香吧香  
這篇文章主要介紹了VUEX?使用?mutations的兩種方式,實(shí)現(xiàn)方式就是利用vuex中的mutations,在mutations中定義一個(gè)方法,這個(gè)方法就是把點(diǎn)擊的index(也就是每個(gè)列表的唯一標(biāo)識(shí)),傳給state中的當(dāng)前標(biāo)識(shí),需要的朋友可以參考下

VUEX 使用 mutations

在 Vuex 中 store 數(shù)據(jù)改變的唯一方法就是提交 mutationsmutations里面裝著一些改變數(shù)據(jù)方法的集合,這是Vuex 設(shè)計(jì)很重要的一點(diǎn),就是把處理數(shù)據(jù)邏輯方法全部放在 mutations 里面,使得數(shù)據(jù)和視圖分離。

  通過(guò)這種方式雖然操作起來(lái)稍微繁瑣一些,但是可以集中監(jiān)控所有數(shù)據(jù)的變化

  示例:

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
     // 事件類型 type 為 increment
    increment (state) { 
      // 變更狀態(tài)
      state.count++
    }
  }
})

第一種使用方式:

  this.$store.commit() 是觸發(fā)mutations的第一種方式,

  示例:

// 方法
mutations:{
  // 加的方法
  increment(state,addcounter){
    state.counter += addcounter
  },
  // 減的方法
  decrement(state,subcounter){
    state.counter -= subcounter
  }
},

  使用:

<template>
  <div>
    <h2>Vuex第四個(gè)頁(yè)面</h2>
    <button @click="addnum(5)">+</button>
    <button @click="subnum(5)">-</button>
    <p>{{$store.state.counter}}</p>
  </div>
</template>

<script>
  export default {
    name: "Vuexfour",
    methods:{
      addnum(addcounter){
        this.$store.commit("increment",addcounter)
      },
      subnum(subcounter){
        this.$store.commit("decrement",subcounter)
      }
    }
  }
</script>

第二種方式 mapMutations

  通過(guò)以函數(shù)映射的方式

    1.從vuex中按需求導(dǎo)入mapMutations 函數(shù)

import {mapMutations} from 'vuex'

    通過(guò)剛才導(dǎo)入的mapMutations函數(shù),將當(dāng)前組件需要的全局?jǐn)?shù)據(jù),映射為當(dāng)前組件的computed計(jì)算屬性

    2. 將指定的mutations函數(shù),映射為當(dāng)前組件的methods函數(shù)

methods:{ ...mapMutations(['add']) }

    示例:

<script>
import { mapMutations } from 'vuex'
export default {
  computed:{
    count(){
      return this.$store.state.count
    }
  },
  methods:{
    ...mapMutations([//采用解構(gòu)的方式引入
      'increment',
      'decrement'
    ])
  }
}
</script>

PS:Vuex中mutations的用法

Vuex中mutations的用法

在 Vuex 中 store 數(shù)據(jù)改變的唯一方法就是提交 mutations。mutations里面裝著一些改變數(shù)據(jù)方法的集合,這是Vuex 設(shè)計(jì)很重要的一點(diǎn),就是把處理數(shù)據(jù)邏輯方法全部放在 mutations 里面,使得數(shù)據(jù)和視圖分離。

Mutations使用

Vuex 中的 mutations 非常類似于事件,每個(gè) mutations 都有一個(gè)字符串的事件類型(type)和一個(gè)回調(diào)函數(shù)(handler),也可以理解為{type:handler()},這和訂閱發(fā)布有點(diǎn)類似。先注冊(cè)事件,當(dāng)觸發(fā)響應(yīng)類型的時(shí)候調(diào)用handker(),調(diào)用type的時(shí)候需要用到store.commit方法。

示例:
這個(gè)回調(diào)函數(shù)會(huì)接受state 作為第一個(gè)參數(shù):

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
     // 事件類型 type 為 increment
    increment (state) { 
      // 變更狀態(tài)
      state.count++
    }
  }
})

我們不能直接使用store.mutations.increment() 來(lái)調(diào)用,Vuex 規(guī)定必須使用 store.commit 來(lái)觸發(fā)對(duì)應(yīng) type 的方法:

store.commit('increment')

提交載荷(Payload)

載荷簡(jiǎn)單的理解就是往 handler(state) 中傳參 handler(state, pryload) 。

示例:
大多數(shù)情況下,載荷是一個(gè)對(duì)象:

mutations: {
 // 提交荷載
 increment (state, payload) {
  state.count += payload.amount
 }
}

提交荷載有兩種方式:

// 把載荷和type分開提交
store.commit('increment', {
 amount: 10
})
 
// 整個(gè)對(duì)象都作為載荷傳給mutation函數(shù)
store.commit({
 type: 'increment',
 amount: 10
})

我們可以根據(jù)自己的方式來(lái)選擇使用哪種提交方式。

commit 我們可以在組件中使用 this.$store.commit(‘xxx’) 提交 mutations。

示例:
或者可以使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用(需要在根節(jié)點(diǎn)注入 store)。

示例:
在使用mapMutations 輔助函數(shù)之前同樣需要先引入:

<script>
import { mapMutations } from 'vuex'
export default {
  computed:{
    count(){
      return this.$store.state.count
    }
  },
  methods:{
    ...mapMutations([//采用解構(gòu)的方式引入
      'increment',
      'decrement'
    ])
  }
}
</script>

Mutations 需遵守 Vue 的響應(yīng)規(guī)則
Vuex 的 store 中的狀態(tài)是響應(yīng)式的,所以當(dāng)我們變更狀態(tài)時(shí),監(jiān)視狀態(tài)的 Vue 組件也會(huì)自動(dòng)更新。

這也意味著 Vuex 中的 mutations 也需要與使用 Vue 一樣遵守一些注意事項(xiàng),如下所示:

最好提前在 store 中初始化好所有所需屬性。
當(dāng)需要在對(duì)象上添加新屬性時(shí),應(yīng)該使用 Vue.set(obj, ‘newProp’, 123),或者以新對(duì)象替換老對(duì)象。例如利用對(duì)象展開運(yùn)算符可以寫成:state.obj = {…state.obj, newProp: 123 }。
使用常量替代 Mutations 事件類型
使用常量替代 mutations 事件類型在各種 Flux 實(shí)現(xiàn)中是很常見的模式。這樣可以使 linter 之類的工具發(fā)揮作用,同時(shí)把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對(duì)整個(gè) app 包含的 mutations 一目了然:

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

store.js 文件內(nèi)容如下所示:

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
 
const store = new Vuex.Store({
 state: { ... },
 mutations: {
  // 使用 ES2015 風(fēng)格的計(jì)算屬性命名功能來(lái)使用一個(gè)常量作為函數(shù)名
  [SOME_MUTATION] (state) {
   // mutate state
  }
 }
})

我們知道m(xù)utation 是通過(guò)store.commit(‘increment’)的方式調(diào)用的,其中increment方法是以字符串的形式代入。如果項(xiàng)目小,一個(gè)人開發(fā)的話倒還好,但是項(xiàng)目大了,編寫代碼的人多了,那就麻煩了,因?yàn)樾枰?commit 的方法一多,就會(huì)顯得特別混亂,而且以字符串形式代入的話,一旦出了錯(cuò),很難排查。

所以,在需要多人協(xié)作的大型項(xiàng)目中,最好還是用常量的形式來(lái)處理 mutation。

必須是同步函數(shù)
我們要記住的是,Mutation 必須是同步函數(shù)。

因?yàn)槲覀冎砸ㄟ^(guò)提交 mutation 的方式來(lái)改變狀態(tài)數(shù)據(jù),是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化。如果是類似下面這樣異步的話:

mutations: {
 someMutation (state) {
  api.callAsyncMethod(() => {
   state.count++
  })
 }
}

我們就不知道什么時(shí)候狀態(tài)會(huì)發(fā)生改變,所以也就無(wú)法追蹤了,這與 Mutation 的設(shè)計(jì)初心相悖,所以強(qiáng)制規(guī)定它必須是同步函數(shù)。

store.commit('increment') // 任何由'increment'導(dǎo)致的狀態(tài)變更都應(yīng)該在此刻完成

需求:點(diǎn)擊不同的音樂列表就讓下方播放列表顯示自己點(diǎn)擊的列表,音樂列表是循環(huán)的

實(shí)現(xiàn)方式:就是利用vuex中的mutations。在mutations中定義一個(gè)方法,這個(gè)方法就是把點(diǎn)擊的index(也就是每個(gè)列表的唯一標(biāo)識(shí)),傳給state中的當(dāng)前標(biāo)識(shí)。在循環(huán)列表的頁(yè)面,把setPlayIndex方法引用過(guò)來(lái)用到頁(yè)面中,點(diǎn)擊不同的列表傳不同的index也就是setPlayIndex方法中的不同的value。

到此這篇關(guān)于VUEX 使用 mutations的兩種方式的文章就介紹到這了,更多相關(guān)VUEX 使用 mutations內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論