在Vue.js中,action是一個(gè)重要的方法,用于在Vuex Store中修改state。有時(shí)候需要將action中計(jì)算的值傳遞給Vue組件進(jìn)行展示,這時(shí)就需要用到action傳值給Vue組件的方法。
首先,在action中計(jì)算需要展示的值,然后將其存入Vuex Store中。代碼如下:
const actions = {
calculateValue(context, payload) {
const value = payload.number1 + payload.number2;
context.commit('setValue', value);
}
}
const mutations = {
setValue(state, value) {
state.value = value;
}
}
然后,在Vue組件中使用computed屬性獲取值,并將其更新到模板中。代碼如下:
computed: {
value() {
return this.$store.state.value;
}
}
最后,在模板中展示計(jì)算出來(lái)的值。代碼如下:
<template>
<div>
The calculated value is {{value}}
</div>
</template>