为什么输入的值没有传递给 VUEX

Question

我无法将 value 从 input 转移到 store。当我点击 add item 按钮时，我需要创建一个 block 及其 delete button 和在 input 中输入的文本。然后将其全部保存在本地存储中。但现在我只创建一个没有文本的新 block。请帮我修复我的代码以使其正常工作。

它应该是这样工作的

但它现在是如何运作的

我做错了什么？如何将值从 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

Answer 1

首先，您的代码不遵守 VueX 状态管理标准。 This article 很好地解释了如何正确使用 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);
    },
  },
});