Почему значение с входа не передается в VUEX - PullRequest
Новая
       18

Почему значение с входа не передается в VUEX

1 голос
/ 22 апреля 2019

Я не могу передать значение из ввода в хранилище .Когда я нажимаю кнопку Добавить элемент , мне нужно создать блок с его кнопкой удаления и текстом, введенным во ввод ,А затем сохранить все это в местном хранилище.Но сейчас я создаю только новый блок без текста.Пожалуйста, помогите мне исправить мой код, чтобы он работал.

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

enter image description here

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

enter image description here

Что я делаю не так?Как передать значение из Input в Vuex?

Вот мой код 

<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>

Код в 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 https://github.com/MrRJDio/ex1

1 Ответ

1 голос
/ 22 апреля 2019

Прежде всего, ваш код не соответствует стандарту управления состоянием VueX. Эта статья очень хорошо объясняет, как правильно использовать VueX.

Некоторые действительные Vuex хотели бы это:

Файл Vue: 

<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>

Магазин: 

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);
    },
  },
});
...