VUEX 使用學習三 : mutations

香吧香發表於2023-01-17
Vue

轉載請註明出處：

　　在 Vuex 中 store 資料改變的唯一方法就是提交 mutations。mutations裡面裝著一些改變資料方法的集合，這是Vuex 設計很重要的一點，就是把處理資料邏輯方法全部放在 mutations 裡面，使得資料和檢視分離。

　　透過這種方式雖然操作起來稍微繁瑣一些,但是可以集中監控所有資料的變化

　　示例：

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

 

第一種使用方式：

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

　　示例：

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

　　使用：

<template>
  <div>
    <h2>Vuex第四個頁面</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

　　透過以函式對映的方式

　　　　1.從vuex中按需求匯入mapMutations 函式

import {mapMutations} from 'vuex'

　　　　透過剛才匯入的mapMutations函式，將當前元件需要的全域性資料，對映為當前元件的computed計算屬性

　　　　2. 將指定的mutations函式,對映為當前元件的methods函式

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

　　　　示例：

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

 

相關文章