标签：silver method input task port share UI ... axios
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 @submitevent 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
标签：silver method input task port share UI ... axios
原文地址：http://www.cnblogs.com/Answer1215/p/7236441.html
