javascript - Why the value from input is not passed to VUEX

Question

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 save it all in localstorage. But now I am creating only a new block without text. Please help me fix my code to make it work.

Here's how it should work

But how it works now

What I'm doing wrong? How do I transfer the value from Input to Vuex?

Here is my code

<template>

      <f7-block-title>Some items</f7-block-title>
      <f7-block v-for="(cat, n) in getCats" :key="n">
        <span>{{ cat }}</span>
        <f7-button fill color="red" @click="removeCat(n)">Delete Cat</f7-button>
      </f7-block>
      <f7-list form>
        <f7-list-input :value="tempCat" type="text"></f7-list-input>
        <f7-button fill color="blue" @click="addCat(tempCat)">Add some item</f7-button>
      </f7-list>

</template>

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

Code in VUEX

function loadLocalStorage() {
  try {
    return JSON.parse(localStorage.getItem('cats'));
  } catch(e) {
    localStorage.removeItem('cats');
    return [];
  }
}

export default new Vuex.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);
        console.log(state.cats);
    },
    SAVE_CATS(state) {
      localStorage.setItem('cats', JSON.stringify(state.cats));
      console.log(state.cats);
    },
    REMOVE_CAT(state, index) {
      state.cats.splice(index, 1);
    },
},
});

GitHub link https://github.com/MrRJDio/ex1

Answer 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-block strong>
    <f7-block-title>Some items</f7-block-title>
    <f7-block v-for="(cat, n) in getCats" :key="n">
      <span>{{ cat }}</span>
      <f7-button fill color="red" @click="removeCat(n)">Delete Cat</f7-button>
    </f7-block>
    <f7-list form>
      <f7-list-input :value="tempCat" type="text" placeholder="Заметка"></f7-list-input>
      <f7-button fill color="blue" @click="addCat(tempCat)">Add some item</f7-button>
    </f7-list>
  </f7-block>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

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

Store:

function loadLocalStorage() {
  try {
    return JSON.parse(localStorage.getItem('cats'));
  } catch(e) {
    localStorage.removeItem('cats');
    return [];
  }
}

export default new Vuex.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);
    },
  },
});