一、action

1.action初步使用

因为mutations中是不能写异步的代码的，比如setTimeOut()等

比如我们需要数据隔几秒再发生变化，这种异步的代码我们只能写在action中。

我们在store/index.js中实现代码如下：

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({state: {num: 0},mutations: {addHandle(state) {state.num++;}},actions: {addSync(context) {setTimeout(() => {context.commit("addHandle");}, 1000);}},modules: {}
});

Son1.vue中代码如下：

<template><div>子组件1<button @click="clickHandle">点击增加1</button><p>{{$store.state.num}}</p></div>
</template><script>
import { mapMutations } from "vuex";
export default {data() {return {};},methods: {clickHandle: function() {this.$store.dispatch("addSync");}}
};
</script>

此时点击按钮会隔一秒数据加一。

2.action中异步传参

store/index.js中代码如下：

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({state: {num: 0},mutations: {addHandle(state, arg) {state.num += arg;}},actions: {addSync(context, arg) {setTimeout(() => {context.commit("addHandle", arg);}, 1000);}},modules: {}
});

Son1.vue中代码如下：

<!-- 子组件1 -->
<template><div>子组件1<button @click="clickHandle">点击增加1</button><p>{{$store.state.num}}</p></div>
</template><script>
export default {data() {return {};},methods: {clickHandle: function() {this.$store.dispatch("addSync", 2);}}
};
</script>

3.action第二种调用方式

store/index.js中代码如下：

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({state: {num: 0},mutations: {addHandle(state, arg) {state.num += arg;}},actions: {addSync(context, arg) {setTimeout(() => {context.commit("addHandle", arg);}, 1000);}},modules: {}
});

Son1.vue中代码如下：

<!-- 子组件1 -->
<template><div>子组件1<button @click="clickHandle">点击增加1</button><p>{{$store.state.num}}</p></div>
</template><script>
import { mapActions } from "vuex";
export default {data() {return {};},methods: {...mapActions(["addSync"]),clickHandle: function() {this.addSync(2);}}
};
</script>

二、getter

getter主要是对store中的数据进行加工处理包装，不会修改store中的数据。

它类似于计算属性，store中的数据发生变化，getter中的数据也会发生变化。

store/index.js中使用getters进行定义

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({state: {num: 10},mutations: {},actions: {},getters: {dataRes(state) {return "修饰后的结果" + state.num;}},modules: {}
});

组件中通过方式一调用

<p>{{$store.getters.dataRes}}</p>

组件中通过方式二调用

<!-- 子组件1 -->
<template><div>子组件1<p>{{dataRes}}</p></div>
</template><script>
import { mapGetters } from "vuex";
export default {data() {return {};},methods: {},computed: {...mapGetters(["dataRes"])}
};
</script>

action、gitter相关推荐

c# 带返回值的action_C#知识点讲解之C#delegate、event、Action、EventHandler的使用和区别...
今天来讲一讲<C#delegate.event.Action.EventHandler的使用和区别> 目录所以,event应运而生所以,EventHandler应运而生所以,Acti ...
Intent中的四个重要属性——Action、Data、Category、Extras
Intent中的四个重要属性--Action.Data.Category.Extras 支持原文:点击链接进入原文阅读-->http://www.cnblogs.com/wisekingokok ...
Redux系列01：从一个简单例子了解action、store、reducer
先看例子其实,redux的核心概念就是store.action.reducer,从调用关系来看如下所示 store.dispatch(action) --> reducer(state, ac ...
C#委托Action、ActionT、FuncT、PredicateT
CLR环境中给我们内置了几个常用委托Action. Action<T>.Func<T>.Predicate<T>,一般我们要用到委托的时候,尽量不要自己再定义一个 ...
C#委托(delegate、Action、Func、predicate)和事件
C#委托(delegate.Action.Func.predicate)和事件 - 园子的蜗牛 - 博客园 C#之委托 - 摸鱼王 - 博客园 C++函数指针与C#委托之间有何联系 - 51CTO.C ...
Struts2——namespace、action、以及path问题
简单的介绍下Struts2中的几个简单的问题(namespace.action.以及path问题) namespace(命名空间) Namespace决定了action的访问路径,默认为"& ...
C#基础知识学习之 ✨ 委托的兄弟姐妹们 delegate、Action、Func、Predicate
委托 delegate.Action.Func.Predicate 简单介绍 delegate.Action.Func.Predicate 几种基础的委托结构几种委托的实例用法开始分析 deleg ...
06_[nvim0.5+从0单排]_Native LSP 自动补全、语法检查、code action、代码段—TypeScript篇
视频与目录项目值教程目录 https://blog.csdn.net/lxyoucan/article/details/120641546 视频全屏 https://www.bilibili.c ...
Android基础之intent-filter、action、category标签使用
Android基础之intent-filter.action.category标签使用 Intents and Intent Filters 我们知道,在android开发中,我们通过intent可以 ...
Action、RenderAction、Partial、RenderPartial区别
都属于用户控件,Action是直接连接到Action,并且会执行业务逻辑,通过源代码分析可以看出Action最终转换为HTML字符串输出了.并且通过断点调试可以发现Action和RenderActio ...

action、gitter

一、action

1.action初步使用

2.action中异步传参

3.action第二种调用方式

二、getter

action、gitter相关推荐

最新文章

热门文章