[Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js @submit.prevent
syntax to avoid that behavior. Then wire together the @submit
event with an add
Vuex action to handle an async post to an api. This lesson walks you through posting to an API using Vue.js, Vuex. and Nuxt.
<template>
<form @submit="onSubmit(task)">
<input v-model="task" type="text" />
</form>
</template> <script>
import { mapState, mapActions } from 'vuex'
import {init} from './shared' export default {
fetch: init,
computed: {
...mapState({
todos: (state) => state.todos
})
},
data () {
return {
task: 'Some data'
}
},
methods: {
onSubmit(task) {
alert(task)
}
}
}
</script>
Notice that after reload the page, when the form submit, the page reloads.
To prevent page reloads every time we submit the form we can use:
<form @submit.prevent="onSubmit(task)">
To deal with the store, we can use 'actions' in Vuex.Store and 'mapActions' helpers:
<template>
<div>
<form @submit.prevent="add(task)">
<input v-model="task" type="text" />
</form>
<article class="pa3 pa5-ns">
<ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
<li v-for="todo of todos" class="ph3 pv3 bb b--light-silver">{{todo.task}}</li>
</ul>
</article>
</div>
</template> <script>
import { mapState, mapActions } from 'vuex'
import {init} from './shared' export default {
fetch: init,
computed: {
...mapState({
todos: (state) => state.todos
})
},
data () {
return {
task: 'Some data'
}
},
methods: {
...mapActions([
'add'
])
}
}
</script>
We change form submit to:
<form @submit.prevent="add(task)">
The 'add' method map to action in store:
import Vuex from 'vuex'
import axios from 'axios' const store = () => new Vuex.Store({
state: {
todos: [
]
},
mutations: {
init (state, todos) {
state.todos = todos
},
add (state, todo) {
state.todos = [
...state.todos,
todo
]
}
},
actions: {
async add (context, task) {
const commit = context.commit
const res = await axios.post('https://todos-cuvsmolowg.now.sh/todos', {
task,
complete: false
})
commit('add', res.data)
}
}
}) export default store
Inside, add function, we post the data to the backend, then we can use 'commit' method to mutate the data in the store.
[Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt的更多相关文章
- vue.js和vue-router和vuex快速上手知识
vue.js和vue-router和vuex快速上手知识 一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也 ...
- Vue.js——十分钟入门Vuex
一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vue ...
- Vue.js状态管理模式 Vuex
vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 安装.使用 vuex 首先我们在 vue. ...
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js中学习使用Vuex详解
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一 ...
- Build a Basic CRUD App with Vue.js and nodejs
https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node#add-authentication-with-okta I’ ...
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
You commit changes to state in Vuex using defined mutations. You can easily access these state mutat ...
- Vue.js 学习笔记 一
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
随机推荐
- 82.QT实现委托构造
#include "mainwindow.h" #include <QApplication> //创建一个MainWindow类 class myclass { pr ...
- pyspark使用
1.安装python3 2.idea安装Python插件 3.下载spark,设置SPARK_HOME环境变量 4.安装pyspark,numpy 5.运行pyspark应用 pyspark应用如果使 ...
- ZJOI2017线段树
ZJOI2017线段树 题意: 给你一颗广义线段树,太长了,自己去看. 题解: 直接上zkw那一套,把闭区间换成开区间,就是把取\([l,r]\),变成取\([l-1,l-1],[r+1,r+ ...
- 洛谷 P1801 黑匣子_NOI导刊2010提高(06)(未完)
P1801 黑匣子_NOI导刊2010提高(06) 题目描述 Black Box是一种原始的数据库.它可以储存一个整数数组,还有一个特别的变量i.最开始的时候Black Box是空的.而i等于0.这个 ...
- java JDK设置环境变量
1.右键"我的电脑"图标.在弹出菜单中依次选择"属性"-"高级"-"环境变量". 2.在"环境变量" ...
- 让JavaScript在Visual Studio 2015中编辑得更easy
微软公布的Visual Studio 2015展示了该公司对于让该开发工具更好的支持主流的开发语言的工作.微软项目经理Jordan Matthiesen已经具体列出了一些具体处理JavaScript开 ...
- oralce的系统用户system的输入口令怎么找回?遇见ORA-28000: the account is locked怎么解锁?
好几个月前安装的Oracle软件忽然想用就忘记了当初设置的口令了,今天查了下怎么找回. 以一个用户jqz/jqz(曾经建立的一个用户.幸亏还记得)的身份登录后: SQL> connect/as ...
- LinearLayout-margin不起作用的处理
1.如果LinearLayout中使用android:layout_marginRight不起作用,通过测试原来在android2.x中,如果一个控件中有android:layout_gravity属 ...
- C#异步编程的实现方式(4)——Task任务
最基本的是知道怎么启动一个Task. 1.Task类构造函数 使用Task类的构造函数.实例化Task对象时,任务不会立即运行,而是指定Created状态.接着调用Task类的Start()方法来启动 ...
- 【Educational Codeforces Round 35 A】 Nearest Minimums
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找出最小的数字的位置. 最近的肯定是相邻的某对. [代码] #include <bits/stdc++.h> using ...