vue中 直接提交mutation的两种方式

commit:提交可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

import { mapMutations } from 'vuex'
 
export default {
 
methods: {
 ...mapMutations([
  'increment' 
  // 映射 this.increment() 为 this.$store.commit('increment')
 ]),
 ...mapMutations({
  add: 'increment' 
  // 映射 this.add() 为 this.$store.commit('increment')
 })
}
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue ,如果要在一个组件操作另一个非父子关系的组件的事件,可以使用事件总线或 Vuex 状态管理。以下是两种方法的介绍: 1. 使用事件总线 事件总线是一个央事件管理器,可以让不同组件之间进行通信。在 Vue ,可以使用一个空的 Vue 实例作为事件总线。 首先,在一个单独的 js 文件创建一个事件总线: ``` // eventBus.js import Vue from 'vue' export const eventBus = new Vue() ``` 然后,在组件 A 触发一个事件: ``` // ComponentA.vue import { eventBus } from './eventBus.js' export default { methods: { handleClick() { eventBus.$emit('myEvent', data) } } } ``` 最后,在组件 B 监听并处理该事件: ``` // ComponentB.vue import { eventBus } from './eventBus.js' export default { mounted() { eventBus.$on('myEvent', this.handleMyEvent) }, methods: { handleMyEvent(data) { // 处理事件 } } } ``` 2. 使用 Vuex VuexVue 的状态管理器,可以让不同组件之间共享状态。在 Vuex ,组件可以通过提交 mutation 或触发 action 来修改状态。 首先,在 Vuex 定义一个 state 和一个 mutation: ``` // store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { myData: null }, mutations: { setMyData(state, data) { state.myData = data } } }) export default store ``` 然后,在组件 A 触发一个 mutation: ``` // ComponentA.vue import store from './store.js' export default { methods: { handleClick() { store.commit('setMyData', data) } } } ``` 最后,在组件 B 读取该状态: ``` // ComponentB.vue import { mapState } from 'vuex' export default { computed: { ...mapState({ myData: state => state.myData }) }, watch: { myData(newVal) { // 处理状态变化 } } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值