为啥输入的值没有传递给 VUEX

Posted 2023-02-22

【中文标题】为啥输入的值没有传递给 VUEX

【英文标题】：Why the value from input is not passed to VUEX为什么输入的值没有传递给 VUEX

【发布时间】：2019-09-11 22:56:53

【问题描述】：

我无法将 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

【参考方案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);
    ,
  ,
);

【讨论】：

当我点击添加按钮时，我得到一个错误"unknown action type: addCat"

查看我的最新编辑。操作名称写错了，但您可以自己发现。

确实，我以为我在上下文中，抱歉。试试state.cats 而不是state.getters.getCats

查看您的控制台日志。您的数组中有一个空字符串。顺便说一句，我删除了@change 事件，因为您不必继续寻找更改。 v-model 在这里可以跟踪您输入的内容。 v-model 将文本输入绑定到数据中的值，并将数据放在文本字段中。这是双向绑定。检查这个：vuejs.org/v2/guide/forms.html

您已经告诉我们了。检查此解决方案github.com/framework7io/framework7-vue/issues/…