Vuex中的dispatch用来触发(派发)action

文章介绍了Vuex中dispatch方法的作用,它用于触发action,action通常包含异步操作,但不能直接改变state,而是通过commitmutation来实现状态更新。以resetChatInput为例,展示了如何通过dispatch调用action并最终影响state的过程。
摘要由CSDN通过智能技术生成

Vuex 中的 dispatch 方法是用来触发(派发)action 的。store.dispatch(‘actionName’) 会去调用名为 actionName 的 action。

在 Vuex 中,actions 类似于 mutations,但是可以包含任意异步操作,而且 action 不能直接修改 state,必须通过提交(commit)mutation 来修改 state

如果我们调用 store.dispatch(‘resetChatInput’),那么就是触发执行名为 ‘resetChatInput’ 的 action。具体执行什么操作取决于 ‘resetChatInput’ 对应的 action 函数在 Vuex store 中的定义。
例如,如果你的 Vuex store 定义如下:

export default createStore({
  state: {
    input: {
      prompt: '',
      quoteChatId: '',
      refImage: ''
    }
  },
  mutations: {
    RESET_CHAT_INPUT(state) {
      state.input.prompt = ''
      state.input.quoteChatId = ''
      state.input.refImage = ''
    }
  },
  actions: {
    resetChatInput({ commit }) {
      commit('RESET_CHAT_INPUT')
    }
  }
})

那么,store.dispatch(‘resetChatInput’) 就是触发 ‘resetChatInput’ 这个 action,这个 action 会执行一个异步操作(在这个例子中没有异步操作),然后提交 mutation ‘RESET_CHAT_INPUT’,这个 mutation 会重置 prompt、quoteChatId 和 refImage 这三个 state 的值为默认值。

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值