1 核心概念-mutations

1.定義mutations

const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 定義mutations
  mutations: {
     
  }
})

2.格式說明

mutations是一個對象，對象中存放修改state的方法

mutations: {
    // 方法里參數(shù) 第一個參數(shù)是當前store的state屬性
    // payload 載荷 運輸參數(shù) 調(diào)用mutaiions的時候 可以傳遞參數(shù) 傳遞載荷
    addCount (state) {
      state.count += 1
    }
  },

3.組件中提交 mutations

this.$store.commit('addCount')

4.練習

1.在mutations中定義個點擊按鈕進行 +5 的方法

2.在mutations中定義個點擊按鈕進行 改變title 的方法

3.在組件中調(diào)用mutations修改state中的值

5.總結(jié)

通過mutations修改state的步驟

1.定義 mutations 對象，對象中存放修改 state 的方法

2.組件中提交調(diào)用 mutations(通過$store.commit(‘mutations的方法名’))

2 帶參數(shù)的 mutations

1.目標：

掌握 mutations 傳參語法

2.語法

看下面這個案例，每次點擊不同的按鈕，加的值都不同，每次都要定義不同的mutations處理嗎？

提交 mutation 是可以傳遞參數(shù)的 this.$store.commit('xxx', 參數(shù))

2.1 提供mutation函數(shù)（帶參數(shù)）

mutations: {
  ...
  addCount (state, count) {
    state.count = count
  }
},

2.2 提交mutation

handle ( ) {
  this.$store.commit('addCount', 10)
}

小tips: 提交的參數(shù)只能是一個, 如果有多個參數(shù)要傳, 可以傳遞一個對象

this.$store.commit('addCount', {
  count: 10
})

3 練習-mutations的減法功能

1.步驟

2.代碼實現(xiàn)

Son2.vue

    <button @click="subCount(1)">值 - 1</button>
    <button @click="subCount(5)">值 - 5</button>
    <button @click="subCount(10)">值 - 10</button>

    export default {
        methods:{
             subCount (n) { 
                this.$store.commit('addCount', n)
        },
        }
    }

store/index.js

mutations:{
    subCount (state, n) {
      state.count -= n
    },
}

4 練習-Vuex中的值和組件中的input雙向綁定

1.目標

實時輸入，實時更新，鞏固 mutations 傳參語法

2.實現(xiàn)步驟

3.代碼實現(xiàn)

App.vue

<input :value="count" @input="handleInput" type="text">

export default {
  methods: {
    handleInput (e) {
      // 1. 實時獲取輸入框的值
      const num = +e.target.value
      // 2. 提交mutation，調(diào)用mutation函數(shù)
      this.$store.commit('changeCount', num)
    }
  }
}

store/index.js

mutations: { 
   changeCount (state, newCount) {
      state.count = newCount
   }
},

5 輔助函數(shù)- mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出來，我們可以將它導入

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}

上面代碼的含義是將mutations的方法導入了methods中，等價于

methods: {
      // commit(方法名, 載荷參數(shù))
      addCount () {
          this.$store.commit('addCount')
      }
 }

此時，就可以直接通過this.addCount調(diào)用了

<button @click="addCount">值+1</button>

但是請注意： Vuex中mutations中要求不能寫異步代碼，如果有異步的ajax請求，應該放置在actions中文章來源地址http://www.zghlxwxcb.cn/news/detail-676352.html

到了這里，關(guān)于Vue2向Vue3過度Vuex核心概念mutations的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！