입력 값이 VUEX에 전달되지 않는 이유

입력 값이 VUEX에 전달되지 않는 이유

저는 입력에서 스토어로 값을 전송할 수 없습니다.항목 추가 버튼을 클릭하면 삭제 버튼과 입력된 텍스트로 블록을 만들어야 합니다.로컬 스토리지에 모두 저장합니다.하지만 지금은 텍스트 없이 새로운 블록만 만들고 있습니다.제 코드가 작동할 수 있도록 수정할 수 있도록 도와주세요.

작동 방법은 다음과 같습니다.

하지만 지금 어떻게 작동하는지는

내가 뭘 잘못하고 있는 거지?입력에서 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

우선, 귀하의 코드는 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);
    },
  },
});

언급URL : https://stackoverflow.com/questions/55799648/why-the-value-from-input-is-not-passed-to-vuex