Why The Value From Input Is Not Passed To Vuex

I can't transfer the value from input to the store. When I click on the add item button, I need to create a block with its delete button and the text entered in the input. And then

Solution 1:

First of all, your code doesn't respect the VueX state management standard. This article explains very well how to make proper use of VueX.

Some valid Vuex would like this:

Vue file:

<template><f7-blockstrong><f7-block-title>Some items</f7-block-title><f7-blockv-for="(cat, n) in getCats":key="n"><span>{{ cat }}</span><f7-buttonfillcolor="red" @click="removeCat(n)">Delete Cat</f7-button></f7-block><f7-listform><f7-list-input:value="tempCat"type="text"placeholder="Заметка"></f7-list-input><f7-buttonfillcolor="blue" @click="addCat(tempCat)">Add some item</f7-button></f7-list></f7-block></template><script>import { mapGetters, mapActions } from'vuex';

exportdefault {
  data () {
    return {
      tempCat: '',
    };
  },
  computed:{
    ...mapGetters([
      'getCats',
    ]),
  },
  methods: {
    ...mapActions([
      'addCat',
      'removeCat',
    ])
  }
}
</script>

Store:

functionloadLocalStorage() {
  try {
    returnJSON.parse(localStorage.getItem('cats'));
  } catch(e) {
    localStorage.removeItem('cats');
    return [];
  }
}

exportdefaultnewVuex.Store({
  state: {
    cats: loadLocalStorage(),
  },
  getters:{
    getCats: state => state.cats,
  },
  actions: {
    addCat(context, data) {
      context.commit('ADD_CAT', data);
      context.commit('SAVE_CATS');
    },
    removeCat(context, data) {
      context.commit('REMOVE_CAT', data);
      context.commit('SAVE_CATS');
    },
  },
  mutations: {
    ADD_CAT(state, data) {
      state.cats.push(data);
    },
    SAVE_CATS(state) {
      localStorage.setItem('cats', JSON.stringify(state.cats));
    },
    REMOVE_CAT(state, index) {
      state.cats.splice(index, 1);
    },
  },
});