Question

如何从我的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')

Answer 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
    },
    //...
}

Answer 2

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

＆＃13;

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'
  })
})

＆＃13;

<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>

＆＃13;

Answer 3

这对我有用：

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

将值从组件

3 个答案: