[Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
2023-09-14 08:59:18 时间
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.
相关文章
- Vue.js 开发实践:实现精巧的无限加载与分页功能
- Vue- 绑定的图片不显示
- JS插件之——bootstrap-suggest.js
- Vue报错:OPTIONS 405 Method Not Allowed以及CORS跨域错误
- vue.config.js
- springboot+vue实现前后端分离之后端spring部分(spring boot 2.5.4/vue.js 3.2.4)
- 富文本框vue-quill-editor的使用
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Vue-rx] Stream an API using RxJS into a Vue.js Template
- [Vue @Component] Dynamic Vue.js Components with the component element
- [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
- gin-vue-admin菜单配置教程:父子菜单
- 前端实操案例丨如何实现JS向Vue传值
- 关于购物车添加按钮的动画(vue.js)
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- Vscode中vue代码颜色插件
- JS工具方法 3 js客户端与php服务器通信加密之AES
- 为什么要学Vue,Vue.js是什么,开始学Vue,Vue的基础指令,自定义指令