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

Posted

技术标签:

【中文标题】为啥输入的值没有传递给 VUEX【英文标题】:Why the value from input is not passed to VUEX为什么输入的值没有传递给 VUEX 【发布时间】:2019-09-11 22:56:53 【问题描述】:

我无法将 valueinput 转移到 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/…

以上是关于为啥输入的值没有传递给 VUEX的主要内容,如果未能解决你的问题,请参考以下文章

为啥 getServerSideProps 没有将正确的值传递给组件 props?

为啥即使我没有将 vuex 状态绑定到任何 html 输入元素,我的 vuex 状态也会在更改组件级别状态时发生变化?

为啥我的值没有传递到 secondViewController [关闭]

为啥我的 QString 没有得到 TextField 的值?

为啥没有将详细的错误消息传递给 HttpClient?

为啥 SSIS 变量没有将毫秒部分传递给查询?