详解vuex中mutation/action的传参方式
更新时间：2018年08月07日 14:19:53 作者：wopelo
这篇文章主要介绍了详解vuex中mutation/action的传参方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前言
在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。
这里是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下
//vuex中的state
const state = {
count: 0
}
export default state;
mutation传参
朴实无华的方式
mutation.js
//vuex中的mutation
const mutations = {
increment: (state,n) => {
//n是从组件中传来的参数
state.count += n;
}
}
export default mutations;
vue组件中（省去其他代码）
methods: {
add(){
//传参
this.$store.commit('increment',5);
}
}
对象风格提交参数
mutation.js
//vuex中的mutation
const mutations = {
decrementa: (state,payload) => {
state.count -= payload.amount;
}
}
export default mutations;
vue组件
methods: {
reducea(){
//对象风格传参
this.$store.commit({
type: 'decrementa',
amount: 5
});
},
}
action传参
朴实无华
action.js
/vuex中的action
const actions = {
increment(context,args){
context.commit('increment',args);
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
increment: (state,n) => {
state.count += n;
}
}
export default mutations;
vue组件
methods: {
adda(){
//触发action
this.$store.dispatch('increment',5);
}
}
对象风格
action.js
//vuex中的action
const actions = {
decrementa(context,payload){
context.commit('decrementa',payload);
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
decrementa: (state,payload) => {
state.count -= payload.amount;
}
}
export default mutations;
vue组件
methods: {
reduceb(){
this.$store.dispatch({
type: 'decrementa',
amount: 5
});
}
}
action的异步操作
突然就想总结一下action的异步操作。。。。
返回promise
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise给触发的store.dispatch
return new Promise((resolve,reject) => {
setTimeout(() => {
context.commit('multiplication',payload);
resolve("async over");
},2000);
});
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue组件
methods: {
asyncMul(){
let amount = {
type: 'asyncMul',
amount: 5
}
this.$store.dispatch(amount).then((result) => {
console.log(result);
});
}
}
在另外一个 action 中组合action
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise给触发的store.dispatch
return new Promise((resolve,reject) => {
setTimeout(() => {
context.commit('multiplication',payload);
resolve("async over");
},2000);
});
},
actiona({dispatch,commit},payload){
return dispatch('asyncMul',payload).then(() => {
commit('multiplication',payload);
return "async over";
})
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue组件
methods: {
actiona(){
let amount = {
type: 'actiona',
amount: 5
}
this.$store.dispatch(amount).then((result) => {
console.log(result);
});
}
}
使用async函数
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise给触发的store.dispatch
return new Promise((resolve,reject) => {
setTimeout(() => {
context.commit('multiplication',payload);
resolve("async over");
},2000);
});
},
async actionb({dispatch,commit},payload){
await dispatch('asyncMul',payload);
commit('multiplication',payload);
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue组件
methods: {
actionb(){
let amount = {
type: 'actionb',
amount: 5
}
this.$store.dispatch(amount).then(() => {
...
});
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
<script setup>是在单文件组件中使用Composition API的编译时语法糖,下面这篇文章主要给大家介绍了关于vue3:setup语法糖使用的相关资料,需要的朋友可以参考下2022-08-08
由于一些演示需要对一些简单页面进行配置,由于打包build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译,所以文件放在public,下面这篇文章主要给大家介绍了关于vue引用public目录下文件的相关资料,需要的朋友可以参考下2022-08-08
vue开发利器之unplugin-auto-import的使用
unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入,也支持自定义插件的自动导入,下面这篇文章主要给大家介绍了关于vue开发利器之unplugin-auto-import使用的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue 中的 watcher的相关资料,需要的朋友可以参考下2017-12-12
这篇文章主要为大家介绍了vue3实现数字滚动特效实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
本文主要介绍了Vue3实现选中对话框带箭头效果的方法,首先通过后台获取数据进行遍历,利用ts代码判断选中下标与循环游标是否一致以改变样式,感兴趣的朋友一起看看吧2024-10-10
这篇文章主要介绍了vue+element加入签名效果（移动端），本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了Vue.js中.native修饰符,给普通的HTML标签监听一个事件，之后添加 .native 修饰符是不会起作用的。需要的朋友可以参考下2018-04-04
Vue框架很核心的功能就是双向的数据绑定。下面这篇文章主要给大家介绍了关于Vue.js中数据绑定的语法教程，文中通过示例代码介绍的非常详细，相信对大家具有一的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式，简单来说，就是将单独功能的js代码抽离出来， 加工成公共函数，从而达到逻辑复用，下面小编就来和大家聊聊Hooks函数的使用及封装思想吧2023-06-06
最新评论