为什么输入的值没有传递给VUEX [英] Why the value from input is not passed to VUEX

问题描述

我无法将值从输入转移到商店.当我点击添加项目按钮时，我需要使用其删除按钮和在输入中输入的文本来创建一个块..然后将其全部保存在本地存储中.但是现在我只创建一个没有文本的新 block .请帮助我修复代码以使其正常工作.

这是它的工作方式

但是现在如何工作

我做错了什么?如何将值从Input传输到Vuex?

这是我的代码

 < template>< f7-block-title>某些项目</f7-block-title>< f7-block v-for =(cat，n)in getCats":key ="n">< span> {{cat}}</span>< f7按钮填充color ="red" @ click ="removeCat(n)">删除猫</f7按钮></f7-block>< f7-list表格>< f7-list-input:value ="tempCat" type ="text"></f7-list-input>< f7-button填充color ="blue" @ click ="addCat(tempCat)">添加一些项目</f7-button></f7-list></template>< script>从'vuex'导入{mapGetters，mapActions};导出默认值{数据 () {返回 {tempCat:，};}，计算值:{... mapGetters(['getCats'，])，}，方法: {... mapActions(['addCat'，删除猫"，])}}</script> 

VUEX中的代码

  function loadLocalStorage(){尝试 {返回JSON.parse(localStorage.getItem('cats'));} catch(e){localStorage.removeItem('cats');返回 [];}}导出默认的新Vuex.Store({状态: {猫:loadLocalStorage()，}，吸气剂:{getCats:状态=>state.cats，}，动作:{addCat(上下文，数据){context.commit('ADD_CAT'，数据);context.commit('SAVE_CATS');}，removeCat(上下文，数据){context.commit('REMOVE_CAT'，数据);context.commit('SAVE_CATS');}，}，突变:{ADD_CAT(状态，数据){state.cats.push(data);console.log(state.cats);}，SAVE_CATS(状态){localStorage.setItem('cats'，JSON.stringify(state.cats));console.log(state.cats);}，REMOVE_CAT(状态，索引){state.cats.splice(index，1);}，}，}); 

GitHub链接 https://github.com/MrRJDio/ex1

解决方案

首先，您的代码不遵守VueX状态管理标准.本文很好地解释了如何正确使用VueX./p>

一些有效的Vuex会这样:

Vue文件:

 < template>< f7-block strong>< f7-block-title>某些项目</f7-block-title>< f7-block v-for =(cat，n)in getCats":key ="n">< span> {{cat}}</span>< f7按钮填充color ="red" @ click ="removeCat(n)">删除猫</f7按钮></f7-block>< f7-list表格>< f7-list-input:value ="tempCat" type ="text" placeholder =Заметка"></f7-list-input>< f7-button填充color ="blue" @ click ="addCat(tempCat)">添加一些项目</f7-button></f7-list></f7-block></template>< script>从'vuex'导入{mapGetters，mapActions};导出默认值{数据 () {返回 {tempCat:，};}，计算值:{... mapGetters(['getCats'，])，}，方法: {... mapActions(['addCat'，删除猫"，])}}</script> 

商店:

  function loadLocalStorage(){尝试 {返回JSON.parse(localStorage.getItem('cats'));} catch(e){localStorage.removeItem('cats');返回 [];}}导出默认的新Vuex.Store({状态: {猫:loadLocalStorage()，}，吸气剂:{getCats:状态=>state.cats，}，动作:{addCat(上下文，数据){context.commit('ADD_CAT'，数据);context.commit('SAVE_CATS');}，removeCat(上下文，数据){context.commit('REMOVE_CAT'，数据);context.commit('SAVE_CATS');}，}，突变:{ADD_CAT(状态，数据){state.cats.push(data);}，SAVE_CATS(状态){localStorage.setItem('cats'，JSON.stringify(state.cats));}，REMOVE_CAT(状态，索引){state.cats.splice(index，1);}，}，}); 

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

解决方案

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

这篇关于为什么输入的值没有传递给VUEX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！