[Vuex] Perform Async Updates using Vuex Actions with TypeScript
typescriptasync with Using Vuex Actions perform Updates
2023-09-14 09:00:48 时间
Mutations perform synchronous modifications to the state, but when it comes to make an asynchronous operation, they become useless.
Actions are a higher layer on the Vuex pattern, which allow to call mutations asynchronously or even call multiple mutations. This lesson guides you through using Vuex actions and type-safe them with TypeScript.
We want to add a todo by calling a API to get a todo from a server, then add into our todo app.
The idea is using 'Actions' to make Async request, then calling 'Mutations' with response data.
import {GetterTree, MutationTree} from 'vuex'; import {State} from '../types'; import {Todo} from '../types'; const state: State = { todos: [ {text: 'Buy milk', checked: false}, {text: 'Learning', checked: true}, {text: 'Algorithom', checked: false}, ], }; export const getters: GetterTree<State, any> = { todos: state => state.todos.filter(t => !t.checked), dones: state => state.todos.filter(t => t.checked) }; export const mutations: MutationTree<State> = { addTodo(state, newTodo) { const copy = { ...newTodo }; state.todos.push(copy); } }; export const actions: ActionTree<tate, any> = { addTodoAsync(context, id) { fetch('https://jsonplaceholder.typicode.com/posts/'+id) .then(data => data.json()) .then(item => { const todo: Todo = { checked: false, text: item.title } context.commit('addTodo', todo); }) } } export default state;
Add into root Store:
import Vue from 'vue'; import Vuex from 'vuex'; import todos, {getters, mutations, actions} from './todos'; Vue.use(Vuex); export default new Vuex.Store({ state: { ...todos, }, getters, mutations, actions });
Using '@Action' inside component:
<template> <section> <h4>Todos</h4> <ul> <li v-for="todo in todos">{{ todo.text }}</li> </ul> <h4>Done</h4> <ul> <li v-for="todo in dones">{{ todo.text }}</li> </ul> <p> <label for=""> Add todo: <input type="text" v-model="newTodo.text" @keyup.enter="addTodo(newTodo)"> </label> <label for=""> Add todo async: <input type="text" v-model="id" @keyup.enter="addTodoAsync(id)"> </label> </p> </section> </template> <script lang="ts"> import {Component, Vue} from 'vue-property-decorator'; import {Action, State, Getter, Mutation} from 'vuex-class'; import {Todo} from '../types'; @Component({ }) export default class Todos extends Vue { @Getter todos: Todo[]; @Getter dones: Todo[]; @Mutation addTodo; @Action addTodoAsync; newTodo: Todo = { text: '', checked: false } id: string = '1'; } </script>
相关文章
- [Typescript] Identity function pattern - Using Identity function to enforce the type 01
- [Typescript] DOMNodeExtractorConfig
- [Typescript] Be Specific for Better Inference
- [Typescript] 98. Medium - Append to object
- [Typescript] ThisType
- [Typescript] 87. Medium - DeepMutable
- [Typescript] 42. Medium - Remove Index Signature
- [Typescript] Exhaustive conditionals - UnreachableError helper class
- [Typescript] Perform null Checks with Assertion Functions
- [Vuex] Lazy Load a Vuex Module at Runtime using TypeScript
- [TypeScript] Simplify asynchronous callback functions using async/await
- [Typescript] TypeScript module Augmentation
- [Typescript] 29. Medium - ReplaceAll
- [Typescript] “Required” Mapped Type, +/- Modifiers
- [Typescript] Promise based delay function using async / await
- TypeScript Partial 使用的一个小技巧
- OpenTiny 跨端、跨框架组件库升级TypeScript,10万行代码重获新生
- 43%非常看好TypeScript…解读“2022前端开发者现状报告”
- TypeScript里string和String,真不是仅仅是大小写的区别