Как в vuex вывести данные реактивно через store в разные шаблоны

186

08 января 2019, 23:10

Не могу разбросаться как выводить значения при заполнение 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.

Может кто-нибудь сталкивался.

Answer 1

В текущем варианте компонент не вызывает никаких обработок при изменении поля phone и следственно ничего не сохраняется в store.

Собственно когда вы вместо phone используете heroPhone начинается вызваться код отвечающий за логику автопроперти, который и устанавливает значение phoneValue в vuex.store.

Для решения вашей задачи можно добавить к heroPhone геттер и сеттер. Собственно любое изменение поля ввода будет вызывать сеттер нашего heroPhone. Поэтому на любой новый символ вызывать сохранение в store избыточно, то в этом случае нам поможет debounce из библиотеки lodash. Если будете пользоваться ей, то не забудьте ее подключить к своему проекту.

Кратко debounce частые вызовы функций блокирует, оставляя только последний. В итоге в store будет записан только самый последний вариант.

new Vue({ 
  el: "#app", 
  data () { 
            return { 
                phone: '' 
            } 
        }, 
        computed: { 
            heroPhone: { 
            get: function () { 
            		return this.phone; // вернем текущее значение 
            }, 
            set: function(value) { 
             this.phone = value; // поставим новое 
             this.debounceSetPhone(); // проставим новое уже в store 
            }} 
        }, 
        created() { 
        		// чтобы не сохранять phone на каждый ввод символа 
        		// будет сохранять раз в 1 секунду 
        		this.debounceSetPhone = _.debounce(this.setPhone, 1000) 
        }, 
        methods:{ 
        	setPhone() { 
          	//this.$store.dispatch('setPhone',  this.phone); 
            console.log(this.phoneProp); 
          } 
        } 
         
         
})

<div id="app"> 
<input type="text" class="form-control" v-model="heroPhone"> 
</div> 
 
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>