状态管理的行为属性内，可以定义异步操作逻辑，以满足某些业务场景要求。在组件内，是通过$store.dispatch来触发行为定义的函数。

我们使用行动，来为计数器异步增1。

一承诺方式

main.js:

const store=new Vuex .Store({ state: { count:0 })，突变： {增量(状态，n=1){状态。计数=n；} }，操作： { AsyncinRement(context)}返回新的promise(resolve={ setTimeout(()={ context。commit(' increment '))；resolve()；}, 1000) });} }});这里使用了答应我，在1 s后提交了突变中定义的增量递增函数。它是ES6语法，有三种状态：

状态说明悬而未决的进行中断然的已完成被拒绝失败index.vue:

模板div { { count } }按钮@ click=' asyncIncrementByAction ' 1/button/div/模板脚本导出默认{ name : '索引。“vue”，计算出： { count(){返回这个.$商店。国家。计数；} }，方法： { asyncIncrementByAction(){ this .$store.dispatch('asyncInrement ').然后(()={ console.log(this .$商店。国家。计数)；}) } } }/script2回调方式

也可以使用普通回调来实现异步方案。

main.js

const store=new Vuex .商店({ 0.操作： {.asyncInrement2(上下文，回调){ setTimeout(()={ context。提交('增量')；回调();}, 1000);} }});index.vue:

模板差异.{ { count } } button @ click=' asynncinclementby action 2 ' 1(回调)/button /div/templatescript导出默认值{.methods: {.asyncinclementbyaction 2(){ this .$商店。调度(' AsyncinRement2 '，()={ console.log(this .$商店。国家。计数)；});} } }/script3效果

状态管理行动和突变的区别

行为的功能和变化是类似的，都是去变更商店里的国家，不过行为和变化有两点不同：

1、行动主要处理的是异步的操作突变必须同步执行，而行为就不受这样的限制，也就是说行为中我们既可以处理同步，也可以处理异步的操作

2、行动改变状态，最后是通过提交变化

使用方式：

安装：

新公共管理安装vuex -保存引用：

store.js

方法一：

/** * 创建完文件后需要去到main.js中引入成全局*/从“Vue”导入Vue从“Vuex”导入Vuex//使用Vuex vue。使用(Vuex)；const state={ TargetUser : } {//用户详细资料数据};const getter={//获取到用户状态，//实时监听状态值的变化（最新状态)目标用户：状态=状态。target USer }；常量突变={ //自定义改变状态初始值的方法SET_TARGET_USER(状态，目标用户){ if(目标用户){状态。目标用户=目标用户；//如果targetUser有内容就赋给状态信息} else { //如果没内容就给targetUser赋空对象国家。target USer={ }；} }};常量操作={ //这里面的方法是用来异步触发突变里面的方法，上下文与商店实例具有相同方法和属性//页面定义的setGargetUser，targetUser为页面传过来的值setGargetUser({ commit }，TARGET USER){ commit(' SET _ TARGET _ USER '，TARGET USER)；}};存储页面：

这个$store.dispatch('setGargetUser '，friend)获取页面：

computed:{ //提示状态管理中存入的用户详细资料target USer(){ 0返回此$store.getters.targetUser } }，以上方法有一个问题就是如果多人开发；会出现不利于管理，下面用一个方法定义一个常量

存储：

这个$store.dispatch('setUser '，decode)store.js

/* * *创建文件后，需要转到main.js，将其导入为全局*/从‘Vue’导入Vue；从“Vuex”导入Vuex；//持久性存储插件从“vuex-persistentstate”导入createpersistentstate//使用vuexvue . use(Vuex)；/* * *在需要多人协作的项目中，我们可以使用常量来代替突变事件类型。这是各种Flux实现中的常见模式。同时，将这些常量放在单独的文件中可以使协作开发变得清晰。*定义存储信息* * */const类型={ set _ target _ user : ' set _ target _ user '/details }；Const state={//用户初始化状态targetUser: {} //用户详细资料数据}；const getter={//获取用户状态，//实时监控状态值的变化(最新状态):targetuser:state=state。target user }；const variants={//自定义更改state[type]初始值的方法。set _ target _ user](状态，目标用户){if(目标用户){state。目标用户=目标用户；//如果targetUser有内容，分配给状态信息} else {//如果没有内容，分配一个空的对象状态。targetUser={}到target USer；} }};Const actions={//这里的方法用于异步触发突变中的方法。上下文和存储实例具有相同的方法和属性setgargetUser ({commit}，targetuser) {commit(类型。set _ target _ user，target user)；//local storage . setitem(' SET _ TARGET _ USER '，JSON . stringify(TARGET USER))；}};导出默认的新Vuex。Store({ state，突变，getters，actions，})；该值为：

这个。$store.getters.targetUser以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。