0

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

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

2
  • Думаю, что значение phone не устанавливается вовсе. Проверь проходят ли мутациая на setPhone.
    – Adrug
    23 сен 2018 в 6:57
  • если в компоненте в котором, отслеживаю значение и вызываю computed:{ heroPhone(){ this.$store.dispatch('setPhone', this.phone) return this.$store.getters.getPhoneValue; }, Не возвращаю` {{heroPhone}}то мутация не проходит. А если возвращаю то в других компонентах значение доступно через геттер computed:{ phone(){ return this.$store.getters.getPhoneValue; }, }` И в state значения вносятся. Что делаю не так?
    – Alex
    23 сен 2018 в 11:43

1 ответ 1

0

В текущем варианте компонент не вызывает никаких обработок при изменении поля 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/[email protected]/lodash.min.js"></script>

4
  • Интересно, неужели тут так важно использовать debounce? Ладно если запрос на сервер идет, но записать в store вроде не так страшно. Также могу посоветовать не ставить всю lodash заради одной функции, есть возможность ставить по одной функции, так, например или можно использовать этот пакет 23 сен 2018 в 18:17
  • @ИльяЗеленько согласен пусть на клиенте хоть тысячу раз будет писать в стор. Да и можно найти вариант по проще или даже самостоятельно реализовать это в своем проекте. На вкус и цвет.
    – Adrug
    23 сен 2018 в 18:28
  • Спасибо за ответ, вроде разобрался. Но не понял для чего использовать хук created у меня он не выполняется. И ещё функция _.debounce(this.setPhone, 1000) тоже не работает, хотя _each из этой библиотеки работает. Возможно проблема областью видимости.
    – Alex
    24 сен 2018 в 10:47
  • created нужен для того чтобы привязать debounceSetPhone к методу setPhone. Если вы подключали lodash через плагины, то нужно использовать this.$_.debounce
    – Adrug
    24 сен 2018 в 13:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.