Vue-admin工作整理(十): Vuex-Actions(模拟接口请求实现组件字段更新)
思路:通过提交一个 mutation,而不是直接变更状态,它可以包括异步操作,通过请求接口,定义一个方法,第一个参数为对象,在里面能够提取到一些东西,比如:commit,这是一个方法,调用这个commit去提交一个mutation
import { getAppName } from '@/api/app' const actions = {
// 请求接口,修改appName字段数据,定义一个updateAppName方法,第一个参数为对象,在里面能够提取到一些东西,比如:commit,这是一个方法,
// 调用这个commit去提交一个mutation,“{ commit }”写法为es6的方式,它相当于获取到的是一个params对象。
// upadateAppName ({ commit }) {
// // es6的函数
// getAppName().then(res => { // 模拟一个异步请求,
// const { info: { appName } } = res // es6的写法
// commit('setAppName', appName)
// }).catch(err => {
// console.log(err)
// }) async updateAppName ({ commit }) { // es8的回调函数
console.log({ commit })
try {
const { info: { appName } } = await getAppName()
commit('setAppName', appName)
} catch (err) {
console.log(err)
}
}
}
export default actions
<template>
<div>
<a-input v-model="inputValue"/>
<p>{{ inputValue }} -> lastLetter is {{ inputValueLastLetter }}</p>
<p>appName: {{ appName }} -> appNameWithVersion is {{ appNameWithVersion }}</p>
<p>userName: {{ userName }} -> firstLetter is {{ firstLetter }}</p>
<a-show :message = "inputValue"/>
<p><button @click="handleChangeAppName">修改appName</button></p>
<p>{{ appVersion }}</p>
<p><button @click="handleChangeUserName">修改用户名</button></p>
</div>
</template>
<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
name: 'store',
data () {
return {
inputValue: ''
}
},
components: {
AInput,
AShow
},
computed: {
...mapState({
appName: state => state.appName,
userName: state => state.user.userName,
appVersion: state => state.appVersion
}),
...mapGetters([
'appNameWithVersion',
'firstLetter'
]),
inputValueLastLetter () {
return this.inputValue.substr(-1, 1)
}
},
methods: {
...mapActions([
'updateAppName'
]),
...mapMutations([
'setAppName',
'setAppVersion',
'setUserName'
]),
handleChangeAppName () {
// this.$store.commit('setAppName', {
// appName: 'newAppName'
// })
// this.$store.commit('setAppVersion')
this.setAppName({
appName: 'apache'
})
this.setAppVersion('V 2.0.2')
// console.log(this.$store)
// console.log(this.updateAppName)
this.updateAppName()
},
handleChangeUserName () {
this.setUserName({
userName: 'alibaba'
})
}
}
}
</script>
总结:
1、mapActions是一个方法,注意它的定义位置不能放在computed里,这样会重复调用,产生 is not faction的现象
2、action有异步调用,注意增加时间等待的方法
Vue-admin工作整理(十): Vuex-Actions(模拟接口请求实现组件字段更新)的更多相关文章
- NodeJs本地搭建服务器,模拟接口请求,获取json数据
最近在学习Node.js,虽然就感觉学了点皮毛,感觉这个语言还不错,并且也会一步步慢慢的学着的,这里实现下NodeJs本地搭建服务器,模拟接口请求,获取json数据. 具体的使用我就不写了,这个博客写 ...
- Vue(二十一)使用express模拟接口数据
1.下载express ... 2.使用vue-cli下载好项目文件 ... 3.找到文件 build - webpack.dev.conf.js 'use strict' const utils = ...
- [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 @submi ...
- python模拟http请求
下文主要讲述如何利用python自带的库模拟http请求,为以后利用python做API测试做准备. 只讲述模拟http的过程,具体到自己用的时候,要以自己的应用为准做出适当的调整. #!coding ...
- 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)
mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...
- Vue技术点整理-Vuex
什么是Vuex? 1,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 2,每一个 Vuex ...
- Vue-admin工作整理(二):项目结构个人配置
通过上一篇文章(Vue-admin工作整理(一):项目搭建)操作完毕后,基础项目已经搭建,下面就要对项目本身进行一下项目结构调整来符合自己的项目要求 1.首先要对package.json文件进行调整, ...
- vue常见知识点整理
什么是 mvvm? MVVM 是 Model-View-ViewModel 的缩写.mvvm 是一种设计思想.Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑:View ...
- 结合 Vue.observable 写一个简易 Vuex
作为 Vue 全家桶的一员,Vuex 的重要性不言而喻,不管是用来管理状态,还是封装 Controler 都很好用 不过在一些体量较小的项目中,为了几个简单的状态或者处理函数而引入 Vuex,就像是高 ...
随机推荐
- sql相同表不同查询条件合并显示
关键字:FULL JOIN 只要其中某个表存在匹配,FULL JOIN 关键字就会返回行. select a.createtime, ISNULL(lp, 0) lp , ISNULL(hp, 0) ...
- python基础之 time,datetime,collections
1.time模块 python中的time和datetime模块是时间方面的模块 time模块中时间表现的格式主要有三种: 1.timestamp:时间戳,时间戳表示的是从1970年1月1日00:00 ...
- 使用TCP模拟登陆
import java.util.ArrayList;import java.util.List; public class UserDB { //使用Map存储账号密码 private static ...
- mac 安装robot framework报错:No matching distribution found for Pywin32
运行 pip install robotframework-ride ,出现以下错误 解决办法:修改Python的运行方式,需要32位的python运行 defaults write com.ap ...
- 如何增加Ubuntu交换空间swap
如何增加Ubuntu交换空间swap 1 使用命令查看系统内swap分区大小 green@green:~$ free -m total used free shared buff/cache ava ...
- DDD领域驱动
DDD领域驱动领域驱动模型.模型驱动代码接触到需求第一步就是考虑领域模型,而不是将其切割成数据和行为,然后数据用数据库实现,行为使用服务实现,最后造成需求的首肢分离.DDD让你首先考虑的是业务语言而不 ...
- 一个简单小技巧实现手机访问.html文件网页效果
注册登录Github不解释 settings设置往下拉 选择一个主题上传代码文件到code 打开这个文件选择此时的网址 在网址前面加上 这段代码 http://htmlpreview.github.i ...
- Leetcode: The Maze III(Unsolved Lock Problem)
There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...
- 解决IE浏览器把application/json响应视为文件并尝试下载
下面我的解决方案是针对.net MVC的,其他的解决方案也类似,就是把响应的mimeType换成IE浏览器已经拥有的.如application/json换成text/plain #region 退出登 ...
- <转载>XML操作
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...