从组件中的 mapActions 将值传递给 vuex 存储答案

【问题标题】：Pass value to vuex store from mapActions in component从组件中的 mapActions 将值传递给 vuex 存储
【发布时间】：2018-04-17 21:25:32
【问题描述】：

如何从我的 Vuex 商店访问我的 @click partSelect 中的值。

Vue 模板

<div id="currentPart">
    <img id="modelImg" @click="partSelect('modelOne')" class="modelImg" :src="model[0]"/>
    <img id="modelImg2" @click="partSelect('modelTwo')" class="modelImg" :src="model[1]"/>
    <img id="modelImg3" @click="partSelect('modelThree')" class="modelImg" :src="model[2]"/>
  </div>

Javascript 映射动作

<script> 
 methods: mapActions([
    'getImage',
    'getImageAsync',
    'partSelect'
  ]),
</script>

Vuex Javascript

export const partSelect = ({ commit }) => commit('partSelect')

【问题讨论】：

你能告诉我partSelected动作定义吗？

标签： javascript vue.js vue-component vuex

【解决方案1】：

这其实很简单，Vuex中的动作应该是这样的：

export const partSelect = ({ commit }, myString) => {
    // do something with myString
    commit('partSelectMutation') // execute the mutation
    // if the data should be added to the mutation:
    // commit('partSelectMutation', { myString })
}

访问突变中的变量 myString（如果使用了上面的第二个版本）：

mutations: {
    partSelectMutation: (state, { myString }) => {
         state.myString = myString
    },
    //...
}

【讨论】：

谢谢，我忘记将更新保存到添加字符串的代码中。您的解决方案效果很好！如果你愿意，另一种澄清。如果我添加 // commit('partSelect', { myString })，我将如何从我的突变中访问字符串
export const partSelect = state => { console.log(myString) if (state.frameNum >= 1) { state.frameNum = 0 } else { state.frameNum++ } }
我已经更新了我的答案，如果有什么不清楚的地方，请随时询问。不过我还没有测试过代码，我只是从我自己的代码中复制和修改了这个 sn-p。

【解决方案2】：

将映射动作作为事件回调的简单示例：

var store = new Vuex.Store({
  state: {
    content: 'Old content'
  },
  mutations: {
    updateContent (state, payload) {
      state.content = payload
    }
  },
  actions: {
    mapMe (context, payload) {
      context.commit('updateContent', payload)
    }
  }
})

new Vue ({
  el: '#app',
  store,
  computed: {
    content () {
      return this.$store.state.content
    }
  },
  methods: Vuex.mapActions({
    mappedAction: 'mapMe'
  })
})

<div id="app">
  {{ content }}<br>
  <button @click="mappedAction('New content')">Click</button>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

【讨论】：

【解决方案3】：

这对我有用：

const mutations = {
    myrequest (state, id) {
        console.log("id:" + id);
    }
}    
const actions = {
    myrequest ({ commit }, id) {
        commit('myrequest', id)
    }
}

【讨论】：