Не работает добавление текста из Input при нажатии на кнопку “add item”

266
08 февраля 2020, 04:10

Переношу логику и данные из компонента во VUEX. При вводе текста в input в консоле пишет ошибку ** this.saveCats is not a function**. Так же текст из input не добавляется и кнопка удаления не работает. Как должно работать: при нажатии на кнопку ADDD SOME ITEM идёт проверка введено ли что-то в поле input и если да ,то после этого на страницу добавляется введённый в input текст и кнопка для его удаления DELET CAT, так же он сохраняется в localstorage и оттуда возвращается при новом открытии страницы.

Помогите пожалуйста поправить код, что бы все нормально заработало во VUEX.

Как это работает сейчас

Вот наглядно как должно работать

Код в компоненте

 <f7-block strong>
    <f7-block-title>Some items</f7-block-title>
      <f7-block v-for="(cat, n) in compCats">
          <span>{{ cat }}</span>
          <f7-button fill color="red" @click="removeCat(n)">Delete Cat</f7-button>
      </f7-block>
        <f7-list form>
            <f7-list-input
              :value="compNewCats"
              @input="newCatOnInput"
              type="text"
              placeholder="Заметка"
            ></f7-list-input>
            <f7-button fill color="blue" @click="addCat">Add some item</f7-button>
        </f7-list>
  </f7-block>
<script>
export default {
computed:{
    compCats() {
        return this.$store.getters.cats;
    },
    compNewCats(){
        return this.$store.getters.newCat;
    }
},
mounted() {
  if (localStorage.getItem('cats')) {
    try {
      this.cats = JSON.parse(localStorage.getItem('cats'));
    } catch(e) {
      localStorage.removeItem('cats');
    }
  }
},
methods: {
    addCat(e) {
    this.$store.commit('addNewCat');
    },
  newCatOnInput(e){
      this.$store.commit('newCatInput',  e.target.value);
  },
  removeCat(n){
      this.$store.comit('removeSomeCat');
  }
}
}
</script>

Код во VUEX

export default new Vuex.Store({
    state: {
      cats:[],
      newCat: null
    },
    getters:{
        cats(state){
            return state.cats;
        },
        newCat(state){
            return state.newCat;
        }
    },
    mutations: { 
     addNewCat(state) {
       // убедиться, что было что-либо введено
       if (!this.newCat) {
         return;
       }
       this.state.cats.push(this.state.newCat);
       this.state.newCat = '';
       localStorage.setItem('cats', JSON.stringify(this.state.cats));
     },
      removeSomeCat(x) {
          this.state.cats.splice(x, 1);
          const parsed = JSON.stringify(this.state.cats);
          localStorage.setItem('cats', parsed);
      },
      saveCats(state) {
        const parsed = JSON.stringify(this.state.cats);
        localStorage.setItem('cats', parsed);
        },
      newCatInput(payload) {  //передаём событие из input и записываем в новую переменную
          this.newCat = payload;
        },
    }
});
Answer 1

Ты не можешь вызывать одну мутацию внутри другой. Да и непонятно зачем это делать. Я вижу такой вариант:

addNewCat(state) {
  // убедиться, что было что-либо введено
  if (!this.newCat) {
    return;
  }
  this.state.cats.push(this.state.newCat);
  this.state.newCat = '';
  localStorage.setItem('cats', JSON.stringify(this.state.cats));
}

То есть не нужно в сторе вот этим заниматься. Мутация принимает 2 значения, одно из которых обязательно state. А другое - нагрузка, т.е. та инфа, которую передать надо. В твоём варианте ты вызываешь saveCats() без аргументов, хотя функция предполагает наличие как минимум одного - state. Если есть большое желание, то вынеси функцию saveCats() за пределы export default, и вызывай просто как функцию, а не как метод вьюекса.

READ ALSO
Мой код работает? (localStorage, onload, unload)

Мой код работает? (localStorage, onload, unload)

Мой код работает? Не могу понятьВроде нет, но может я неправильно проверяю

262
Связанные select jQuery

Связанные select jQuery

У меня есть три условных двумерных массивa:

251
Передача данных между компонентами React

Передача данных между компонентами React

Есть две компоненты одного уровня, мне нужно передать значение которое было получено в компоненте NavigationBar в компоненту SearchLine

251