为啥输入的值没有传递给 VUEX
Posted
技术标签:
【中文标题】为啥输入的值没有传递给 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/…以上是关于为啥输入的值没有传递给 VUEX的主要内容,如果未能解决你的问题,请参考以下文章
为啥 getServerSideProps 没有将正确的值传递给组件 props?
为啥即使我没有将 vuex 状态绑定到任何 html 输入元素,我的 vuex 状态也会在更改组件级别状态时发生变化?
为啥我的值没有传递到 secondViewController [关闭]