基于vue-cli的vue项目之vuex的使用3-------action异步传参-程序员宅基地

由于使用commit是同步的，所以也就有了使用“异步”的action的诞生

1.store.js//配置仓库第十五行到第二十三行配置action，
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		increment(state, n) {
			console.log(n);
			state.count += n.amout;
		}
	},
	actions: {
		increment(context, m) {
			setTimeout(() => {
				context.commit({
					type: "increment",
					amout: m.amout
				})
			}, 1000)
		}
	}

})
//export default store;
export default store;

2.main.js//配置store的路径，在第三十九行使用store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store';
Vue.config.productionTip = false;
new Vue({
	el: '#app',
	router,
	store,
	template: '<App/>',
	components: {
		App
	},
})

3app.vue//在组件中使用//在第六十七行到第七十二行使用dispatch去提交
<template>
	<div id="app">
		<img src="./assets/logo.png">
		<button @click="clickme">点击调用commit</button>
		<button @click="clickme1">点击调用dispatch</button>
		<span>{
   {$store.state.count}}</span>
	</div>
</template>
<script>
	export default {
		name: 'app',
		data() {},
		methods: {
			clickme: function() {
				this.$store.commit({
					type: "increment",
					amout: 180
				});
				console.log(this.$store.state.count);
			},
			clickme1: function() {
				this.$store.dispatch({
					type: "increment",
					amout: 180,
				});
			}
		},
	}
</script>
<style>
</style>

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/78050032

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

OpenCV计算机视觉实战 - Task5 - 停车场车位识别【项目实战】（附完整代码）_停车管理项目实战,计算机视觉-程序员宅基地

任务描述：识别这种停车场图的空车位与被占用车位识别流程：预处理 -> 保存空车位和已被占用车位的图片 -> 训练VGG网络进行二分类img_process 图像预处理过程1.select_rgb_white_yellow 过滤背景（得到mask）inRange(图,min阈值,max阈值) 小于min(大于max)的为0,min-max的为255dst = cv.bitwise_and(src1, src2[, dst[, mask]]src1:图1 sr_停车管理项目实战,计算机视觉

【动态规划】Kitty猫基因突变_dnldnth的博客-程序员宅基地

题四 Kitty猫基因突变源程序：kitty.exe可执行程序：kitty.exe输入文件：kitty.in输出文件：kitty.out 某大学生选修了生物基因工程学。教授提出了ABC编码方案是不断地按照 A 若S串全是0T（S）= B 若S串全是1 CT(S1

android备忘录教学_Android Studio-备忘录功能实现-程序员宅基地

终于，Android作业弄完了，最后一个，备忘录教学。相关安卓教学内容：首先第一步，还是老样子，创建一个NoteActivity。image.png第二步，打开activity_note.xml，开始布局，话不多说了，关于这一块的内容我在登录，注册当中已经教学的很详细了，直接上代码吧，反正我码再多字估计你们也不看....xmlns:app="http://schemas.android.com/a..._android studio 备忘录

FOC入门_起名什么的很麻烦的博客-程序员宅基地

深入浅出FOC(Field Oriented Control)前言:为什么要学习FOC?1.电机控制是自动化控制领域重要一环。2.目前直流无刷电机应用越来越广泛，如无人机、机械臂、云台、仿生机器人等等。3.电机控制工程师薪水较高。原谅我也比较物质,O(∩_∩)O哈哈~..._foc

Spring Boot 实现多图片上传并回显，涨姿势了～_插槽实现上传多张照片并回显_Java技术栈的博客-程序员宅基地

作者：不学无数的程序员链接：https://www.jianshu.com/p/3e28b94444be这两天公司有需求让做一个商户注册的后台功能，其中需要商户上传多张图片并回显。由于之前没做过这方面的东西，此篇文章用以记录一些知识点，以便后续查看。上传Controller的代码非常简单，由于用了SpringMVC框架，所以直接用MultipartFile来接即可。由于是多图片上传所以用数组来接。此处应该注意参数名应该和<input>中的name值相对应：@RequestMapping_插槽实现上传多张照片并回显

module ‘platform‘ has no attribute ‘linux_distribution‘_module 'platform' has no attribute 'linux_distribu-程序员宅基地

Ubuntu python3 使用pip list的时候报这个错误解决办法：python - How to fix "module 'platform' has no attribute 'linux_distribution'" when installing new packages with Python3.8? - Stack Overflowhttps://stackoverflow.com/questions/58758447/how-to-fix-module-platform-has_module 'platform' has no attribute 'linux_distribution

随便推点

Java开发经典实战！java的动态代理和静态代理_java 动态代理实战-程序员宅基地

1、Java基础Java基础务必要有一个非常牢固的根基，尤其是对于JVM和并发编程的掌握情况**（属于进阶内容，但也是Java最为重要的基础内容）**，不论是面试还是工作，基础不好，写不出高质量、漂亮的代码；面试估计刚开始就会被面试官给拍死。基础不好的话，《Java编程思想》和《Java核心技术》这两本书一定要好好看一下，同时再搭配学习笔记等资料，能让你更好的打稳基础！同时，大家可以对照下面这份学习路线梳理一下自己的知识体系，需要获取高清完整版Java学习路线的话，可以在文末免费领取Java架构师筑基_java 动态代理实战