Не могу разбросаться как выводить значения при заполнение Input в одном компоненте через store Для вывода в другом, сейчас сделал через computed, всё работает, но только если в шаблоне где происходит заполнение инпута вернуть это свойство. Есть дочерний компонент в котором
<template>
<input type="text" class="form-control" v-model="phone">
</template>
<script>
export default {
data(){
return {
phone:''
}
},
computed:{
heroPhone(){
this.$store.dispatch('setPhone', this.phone)
return this.$store.getters.getPhoneValue;
},
}
</script>
В store.js
export default new Vuex.Store({
state:{
phoneValue: '',
},
getters:{
getPhoneValue: state => { return state.phoneValue }
},
actions:{
setPhone(context, data){
context.commit('setPhone', data)
},
mutations:{
setPhone(state, payLoad){
state.phoneValue = payLoad
},
}
})
И соответственно с другом компоненте пытаюсь вывести значение phoneValue из store, в computed свойстве,
computed:{
phone(){
return this.$store.getters.getPhoneValue
}
}
вывожу через {{phone}} само свойство. Но так ничего не выводится, а выводится только если в шаблоне где отлавливаю значение input
v-model="phone"
Вывести объявленное computed свойство {{heroPhone}} тогда в других шаблонах значение store.phoneValue
отлично выводится.
Не могу понять как правильно выводить реактивно данные в разные шаблоны через vuex.
Может кто-нибудь сталкивался.
computed:{ heroPhone(){ this.$store.dispatch('setPhone', this.phone) return this.$store.getters.getPhoneValue; },
Не возвращаю` {{heroPhone}}то мутация не проходит. А если возвращаю то в других компонентах значение доступно через геттер
computed:{ phone(){ return this.$store.getters.getPhoneValue; }, }` И в state значения вносятся. Что делаю не так?