Vuex 中的mapActions怎么传递自定义参数?

1. 问题mapActions如何传递自定义参数


2. 结论

这里的mapActions会自动把reduce(20) 映射成this.$store.dispatch('decrement', 20)


3. 完整代码

(Footer组件)






(store.js文件)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 0
  },
  actions: {
    decrement ({commit}, param) {
      commit ('decrement', param)
    }
  },
  mutations: {
    decrement (state ,param) {
      this.state.num-=param
    }
  },
  modules: {
  }
})

4. 思考

  1. vuex 中数据是单向流动的,state =》components =》 actions =》mutations =》state ,如果需要传入参数,需要在组件和用户交互的时候传递,在某个组件的某个事件中(例如:点击事件)
  2. 参数的流向是一层一层向下的,从 components =》actions =》 mutations =》 state =》components,和数据的流向一致在这里插入图片描述

你可能感兴趣的:(Vue)