[Nuxt] Update State with Vuex Actions in Nuxt.js
JS in with update State Vuex Nuxt Actions
2023-09-14 09:00:51 时间
You can conditionally add classes to Vue.js templates using v-bind:class
. This will help display the status of a todo as you add a Vuex action to patch todos. This lesson walks you through setting up a toggle button that triggers a toggle action to patch todos in Vuex.
<template> <div> <form @submit.prevent="add(task)"> <input v-model="task" type="text" /> <input type="submit" value="ADD"> </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="flex items-center ph3 pv3 bb b--light-silver"> <span v-bind:class="{strike: todo.complete}" class="flex-auto">{{todo.id}} {{todo.task}}</span> <button @click="toggle(todo)"><img src="https://icon.now.sh/check" alt="toggle"></button> <button @click="remove(todo)"><img src="https://icon.now.sh/trash" alt="delete"></button> </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', 'remove', 'toggle' ]) } } </script>
store/index.js:
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 ] }, remove (state, todo) { state.todos = state.todos.filter((t) => { return t.id !== todo.id }) }, toggle (state, todo) { state.todos = state.todos.map(t => { return t.id === todo.id ? todo : t }) } }, 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) }, async remove ({commit}, todo) { await axios.delete(`https://todos-cuvsmolowg.now.sh/todos/${todo.id}`) commit('remove', todo) }, async toggle ({commit}, todo) { const res = await axios.patch(`https://todos-cuvsmolowg.now.sh/todos/${todo.id}`, {complete: !todo.complete}) commit('toggle', res.data) } } }) export default store
相关文章
- creating-skeletal-animation-in-blender-and-exporting-it-to-three-js
- JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
- [Node.js] Handle Relative Paths in a Node.js ESM Project with import.meta.url
- [Node.js] Resolve path problem in all envs (require.resolve)
- [WASM] Run WebAssembly in Node.js using the node-loader
- [Node.js] Write or Append to a File in Node.js with fs.writeFile and fs.writeFileSync
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
- [Hapi.js] Using the response object
- when is this.oModel in sap-ui-core.js initialized for navigation working case
- 【华为云技术分享】【一统江湖的大前端(9)】TensorFlow.js 开箱即用的深度学习工具
- Ios开发之 -- js和ios的交互
- js 模块化 -- 基本的导出与引入class模块
- Node.js学习笔记(三)——Node.js开发Web后台服务
- 【异常】前端提示Cannot use [chunkhash] or [contenthash] for chunk in ‘[name].[chunkhash].js‘
- 超详细的Node.js瓦片拼接教程:从原理到实战,助你轻松完成地图应用开发