vuex新手进阶篇之actions的使用方法
作者:Jay丶千珏 发布时间:2024-04-27 16:13:54
标签:vuex,actions
紧接上篇文章,本篇文章讲vuex ,如何去改变state ,actions的使用,我依然使用了vuex的modules
1.设置actions事件
index.js
dict.js
2.在组件中去分发actions
<template>
<div>
<div>
改变vuex index.js 下的state
<div>
{{ $store.state.userInfo.name + "---" + $store.state.userInfo.age }}
</div>
<div>
<button @click="changeUserInfo">修改方式1</button>
</div>
<div>
<button @click="changeUserInfo2">修改方式2</button>
</div>
</div>
--------------------------------------------------
<div>
改变vuex index.js modules下的dict 下的state
<div>
{{ $store.state.dict.taskTypeDict }}
</div>
<div>
<button @click="changeDict">修改方式1</button>
</div>
<div>
<button @click="changeDict2">修改方式2</button>
</div>
</div>
</div>
</template>
<script>
import { mapActions } from "vuex"; //方式二 1.首先引入
export default {
methods: {
// 方式一,dispatch分发事件
changeUserInfo() {
this.$store.dispatch("getUserInfo");
},
// 方式二
...mapActions(["getUserInfo2"]), //2.使用mapActions函数将组件的 methods 映射为 store.dispatch 调用
changeUserInfo2() {
this.getUserInfo2(); //3.调用
},
// -------------------------------------------------------------------------------------------
//因为我们在modules下开启了命名空间,所以我们在调用dict下的Actions时,需在前方加上空间名字
changeDict() {
this.$store.dispatch("dict/getTaskTypeDict");
},
//因为我们开辟了命名空间,故需要重写一个方法名,进行承接映射,注意此处不再是数组,而是一个对象
...mapActions({ getDicts: "dict/getTaskTypeDict2" }),
changeDict2() {
this.getDicts();
},
},
};
</script>
3.注意点
action 类似于 mutation,不同在于
1.action 提交的是 mutation事件,而不是直接去改变state的状态值,改变state的值只有通过mutation
2.action 可以包含任意异步操作
actions的细节补充
1.参数问题
2.context的其他属性
3.另外一种提交风格(见上以对象的形式进行分发)
//store的index.js中
actions: {
// 放函数
// 1.参数问题
incrementAction(context, payload) {
console.log(payload)
setTimeout(() => {
context.commit('increment')
}, 1000);
},
// 2.context的其他属性
decrementAction({ commit, dispatch, state, rootState, getters, rootGetters }) {
commit("decrement")
}
}
来源:https://blog.csdn.net/qq_42543244/article/details/118225352
0
投稿
猜你喜欢
- 通过锁机制,可以实现多线程同时对某个表进行操作。如下图所示,在某个时刻,用户甲、用户乙、用户丙可能会同时或者先后(前面一个作业还没有完成)对
- 前言总是记不住字符串拼接,每次都要百度去搜索,所以在这里记录一下,好方便后续的查找,如有错误和问题可以提出,谢谢。字符串拼接分为几种方式,在
- 本文实例讲述了Python利用神经网络解决非线性回归问题。分享给大家供大家参考,具体如下:问题描述现在我们通常使用神经网络进行分类,但是有时
- “一起去爬山吧?”这句台词火爆了整个朋友圈,没错,就是来自最近热门的《隐秘的角落》,豆瓣评分8.9分,好评不断。感觉还是蛮不错的。同时,为了
- Python 中主要有8种数据类型:number(数字)、string(字符串)、list(列表)、tuple(元组)、dict(字典)、s
- 01 创建不可见列创建不可见列:CREATE TABLE `t2` ( `id`&nbs
- 如果备份的数据库有2个文件,分别是.LDF 和 .MDF,打开企业管理器,在实例上右击---所有任务--附加数据库,然后选择那个.MDF文件
- 摘要:有时候我们只需要数据集中的一部分,并不需要全部的数据。这个时候我们就要对数据集进行随机的抽样。pandas中自带有抽样的方法。应用场景
- Python输入在Python中,使用内置函数input()可以接收用户的键盘输入input()函数的基本用法如下:variable = i
- 说起 Python 强大的地方,你可能想到是它的优雅、简洁、开发速度快,社区活跃度高。但真正使得这门语言经久不衰的一个重要原因是它的无所不能
- 应用一:有时候我们想把一个 list 或者 dict 传递给 javascript,处理后显示到网页上,比如要用 js 进行可视化的数据。请
- 1、我的源码在 /home/topsec/Documents/php-7.0.11 ,安装位置在 /usr/local/php7, php.
- 蜗牛很慢。蜗牛快递会怎样?答案是:当然也会很慢。但是蜗牛尽了他的全力,为了它的兔子朋友,以生命在奔跑。每天都是24个小时,快的只是速度,却不
- 本篇介绍在执行MySQL线上变更时遇到的问题,表现为"更新JSON字段时,实际更新的值与SQL语句中的值不一致,JSON格式错误&
- 本文为大家分享了virtualenv建立多个Python独立虚拟开发环境,供大家参考,具体内容如下1、安装virtualenv:pip in
- 本文实例为大家分享了python图书管理系统的具体代码,供大家参考,具体内容如下实现语言:python图形框架:DTK+2.0数据库框架:S
- 本文实例讲述了Python数据结构与算法之图的基本实现及迭代器。分享给大家供大家参考,具体如下:这篇文章参考自《复杂性思考》一书的第二章,并
- JSON 格式可以使对象(object)、数组(array)、值(value)、字符串(string)、数值(number)。 <sc
- 创建项目django-admin startproject meiduo_mall添加工程完整结构包启动前端python -m http.s
- 平常我都是直接执行 pip install 安装的第三方库,很多教程也是这么介绍的,一直以来我都认为这是标准的、正确的安装 Python 第