- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
为什么会出现此错误:
Error [vuex] Do not mutate vuex store state outside mutation handlers.
这是什么意思?
当我尝试输入编辑输入文件时会发生这种情况。
pages/todos/index.vue
<template>
<ul>
<li v-for="todo in todos">
<input type="checkbox" :checked="todo.done" v-on:change="toggle(todo)">
<span :class="{ done: todo.done }">{{ todo.text }}</span>
<button class="destroy" v-on:click="remove(todo)">delete</button>
<input class="edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
</li>
<li><input placeholder="What needs to be done?" autofocus v-model="todo" v-on:keyup.enter="add"></li>
</ul>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
data () {
return {
todo: '',
editedTodo: null
}
},
head () {
return {
title: this.$route.params.slug || 'all',
titleTemplate: 'Nuxt TodoMVC : %s todos'
}
},
fetch ({ store }) {
store.commit('todos/add', 'Hello World')
},
computed: {
todos () {
// console.log(this)
return this.$store.state.todos.list
}
},
methods: {
add (e) {
var value = this.todo && this.todo.trim()
if (value) {
this.$store.commit('todos/add', value)
this.todo = ''
}
},
toggle (todo) {
this.$store.commit('todos/toggle', todo)
},
remove (todo) {
this.$store.commit('todos/remove', todo)
},
doneEdit (todo) {
this.editedTodo = null
todo.text = todo.text.trim()
if (!todo.text) {
this.$store.commit('todos/remove', todo)
}
},
cancelEdit (todo) {
this.editedTodo = null
todo.text = this.beforeEditCache
},
},
directives: {
'todo-focus' (el, binding) {
if (binding.value) {
el.focus()
}
}
},
}
</script>
<style>
.done {
text-decoration: line-through;
}
</style>
stores/todos.js
export const state = () => ({
list: []
})
export const mutations = {
add (state, text) {
state.list.push({
text: text,
done: false
})
},
remove (state, todo) {
state.list.splice(state.list.indexOf(todo), 1)
},
toggle (state, todo) {
todo.done = !todo.done
}
}
有什么办法可以解决这个问题吗?
最佳答案
在属于 Vuex 的一段状态上使用 v-model 可能有点棘手。
并且您在此处的todo.text
上使用了v-model
:
<input class="edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
使用 :value
读取值并使用 v-on:input
或 v-on:change
执行执行突变的方法在显式 Vuex 突变处理程序中
此问题在此处处理:https://vuex.vuejs.org/en/forms.html
关于vue.js - Vuex - 不要在突变处理程序之外改变 vuex 存储状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46044276/
不要 重复自己* 如何为现代机器学习设计开源库 🤗 Transformers 设计理念 “不要重复自己 (Don’t Repeat Yourself)” ,或 DR
我有这种情况。我有 2 个分支,master 和 develop。 在开发分支上我有一些文件,比如说 tools.js .如果我需要更改这个文件,提交它并将其推送到 Github 开发分支。 一切完成
我要上传图片但首先我想查看图像预览,然后当用户单击另一个 asp:button 时,保存图像。 对于预览部分,我使用以下代码: jQuery(document).ready(functi
我是一名编程初学者,现在从 Python 切换到 Clojure。我正在研究一个质数代码,但我没有弄错。我也想练习递归 (defn true-division [n i] (= (/ n i) (
运行 Python 2.7 执行时: $ python client.py get_emails -a "åäö" 我得到: usage: client.py get_emails [-h] [-a
根据我对“告诉-不要-询问”原则的理解,我的其他类不应该能够调用存储在任何其他类中的数据。因此,根据这一原则, setter/getter 是不受欢迎的。为了防止访问数据,它们通常写为: class
我在寻找什么: 我想使用SIMPLE模式最小化的出色功能,同时仅禁用一项特定功能(禁用内联本地功能)。 更新:答案是否定的,根据我的设置是不可能的。 但对于我来说,鉴于我正在使用Grails,有一种解
根据我对“告诉-不要-询问”原则的理解,我的其他类不应该能够调用存储在任何其他类中的数据。因此,根据这一原则, setter/getter 是不受欢迎的。为了防止访问数据,它们通常写为: class
是否可以不 float 具有样式 UITableViewStylePlain 的 UITableView 的节标题? 我正在 build AcaniChat, an open-source versi
当二进制文件、swfs、jar 和 flvs 在本地更改时,我尝试 pull 入更改,git 尝试 merge 它们并报告冲突。 然后,我分支到一个临时分支,提交本地更改的二进制文件,并在 pull
我正在尝试使用 Pex 来测试一些代码。我有一个具有四个具体实现的抽象类。我为四种具体类型中的每一种都创建了工厂方法。我还为抽象类型创建了一个,除了 this nice thread。说明,Pex 不
我正在将 asp.net mvc 3 和 razor 用于一个项目。在某些情况下,我需要从 Controller 序列化一个数组,将其放入 View 数据并将其分配给一个 js 对象。但是当我使用 输
是否可以让一个 webpack 开发服务器配置多个入口点(网站上有多个页面),每个入口点都有不同的配置? 具体来说,我希望将一个条目(页面的 JS 代码)分成 block ,但不要将另一个条目(带有已
我需要使用 hibernate 将 InputStream 或 byte[] (个人资料图像)保存在表中。这里的代码: @Override public void actualizarFotoPerf
我在一个 android 项目中同时拥有 GMS 和 HMS。 GMS 版本有效,但 HMS 不调用 onMapReady 回调。这是代码: private var mMap: HuaweiM
我有一个单元测试文件: module X04PatMatTest where import AssertError import Test.HUnit import X04PatMat ... 和 h
是否可以将 c++ 库包装到 c 中? 我该怎么做? 有现成的工具吗? (需要访问现有的 c++ 库,但只能使用 C) 最佳答案 您可以用 C 编写面向对象的代码,因此如果它是面向对象的 C++ 库,
我有一个 JSP 页面,它接受 SQL 查询,执行它们然后将结果返回到一个表中。一些结果偶尔会在其中包含 HTML 标记,即 - 结果将返回: This is the returned result!
我有一个问题。 我需要帮助。我一直在寻找解决方案大约 5 个小时。不幸的是没有成功。 我的问题是我有几个 Storyboard并且没有使用 Segue 创建。 我希望将选定的 Tableviewcel
当我尝试运行以下代码时: #include void main() { char *a[10] = {"hi", "hello", "how"}; int i = 0, j = 0;
我是一名优秀的程序员,十分优秀!