在Vuex中Mutations修改状态操作下详解

上篇是读取state，这篇是修改状态。即如何操作Mutations。

一. $store.commit( )

Vuex提供了commit方法来修改状态

1.store.js文件

const mutations={
  add(state){
    state.count++
  },
  reduce(state){
    state.count--
  }
}

2.在button上的修改方法

+

-

二. 传值

最简单的修改状态的操作，在实际项目中我们常常需要在修改状态时传值。比如上边的例子，是我们每次只加1，而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数，并在commit的时候传递就就可以了。我们来看具体代码：

1.store.js

const mutations={
  add(state,n){
    state.count+=n
  },
  reduce(state){
    state.count--
  }
}

2.修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10.

+

-

三.模板获取Mutations方法

实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。

例如：@click=”reduce” 就和没引用vuex插件一样。

1.在模板count.vue里用import 引入我们的mapMutations：

import { mapState,mapMutations } from 'vuex'

2.在模板的

Artikel terbaru oleh pengarang

• php操作redis大全记录
  2023-04-09 22:44:01
• 重点详解Java类和对象
  2021-05-21 15:21:45
• 浅析php简单操作mysql锁机制
  2023-04-09 22:42:01
• php无法加载mysql怎么办
  2023-03-09 12:50:01
• css如何禁止复制
  2023-01-05 16:13:24
• css如何禁止滑动
  2023-01-05 16:13:23
• css如何改变图片颜色
  2021-04-30 16:46:04
• ajax和javascript的区别是什么
  2023-01-05 16:13:23
• javascript如何定义私有方法
  2023-01-05 16:13:22
• javascript如何将时间字符串转化为时间
  2021-04-30 16:27:19

Isu terkini

Perintah pelaksanaan fungsi penjadualan VueJS menyebabkan masalah Saya cuba memaparkan senarai pengumuman (diambil daripada API) pada halaman. Saya mengguna...

daripada 2024-04-06 10:37:58

0

1

385

Bagaimana untuk menambah Vuex 3 untuk Vue 2.7? Apabila saya menjalankan: yarncreatenuxt-app yang saya lihat dalam package.json: "dep...

daripada 2024-04-05 13:49:24

0

1

1382

Masalah semasa cuba mengakses data daripada vuex Saya cuba memasukkan data air ke dalam Vuex dan semuanya berfungsi dengan baik sehingga sa...

daripada 2024-04-03 23:54:45

0

1

358

Lulus parameter Vuex this.$store.commit('deleteCheckboxItems',response.data.items.forEach(element=>{element....

daripada 2024-04-03 22:36:08

0

2

334

Kaedah forEach dalam getter Vuex mengembalikan satu nilai dan bukannya berbilang nilai Saya mempunyai troli beli-belah yang merupakan pelbagai produk dan saya ingin mengakses se...

daripada 2024-03-31 23:43:14

0

1

373

Topik-topik yang berkaitan

Lagi>

• apa itu vuex
• Apa yang perlu dilakukan jika tiada bunyi dari mikrofon komputer
• Apakah fungsi
• warna fon css
• Bagaimana untuk membuka fail vcf dalam windows
• Bagaimana untuk mengkonfigurasi pelayan web
• Bagaimana untuk menukar fail pdg kepada pdf
• Bagaimana untuk membaiki sistem win7 jika ia rosak dan tidak boleh boot