Vuex的actions属性的具体使用


Posted in Javascript onApril 14, 2019

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

我们使用 action,来为计数器异步增 1。

1 Promise 方式

main.js:

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state, n = 1) {
      state.count += n;
    }
  },
  actions: {
    asyncInrement(context) {
      return new Promise(resolve => {
        setTimeout(() => {
          context.commit('increment');
          resolve();
        }, 1000)
      });
    }
  }
});

这里使用了 Promise ,在 1 s 后提交了 mutations 中定义的 increment 递增函数。它是 ES6 语法,有三种状态:

状态 说明
Pending 进行中
Resolved 已完成
Rejected 失败

 index.vue:

<template>

  <div>
    {{count}}
    <button @click="asyncIncrementByAction">+1</button>
  </div>
</template>

<script>
  export default {
    name: "index.vue",
    computed: {
      count() {
        return this.$store.state.count;
      }
    },
    methods: {
      asyncIncrementByAction() {
        this.$store.dispatch('asyncInrement').then(() => {
          console.log(this.$store.state.count);
        })
      }
    }
  }
</script>

2 Callback 方式

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

main.js

const store = new Vuex.Store({
...
  actions: {
   ...
    asyncInrement2(context, callback) {
      setTimeout(() => {
        context.commit('increment');
        callback();
      }, 1000);
    }
  }
});

index.vue:

<template>
  <div>
    ...
    {{count}}
    <button @click="asyncIncrementByAction2">+1(Callback)</button>
  </div>
</template>

<script>
  export default {
    ...
    methods: {
      ...
      asyncIncrementByAction2() {
        this.$store.dispatch('asyncInrement2',() => {
          console.log(this.$store.state.count);
        });
      }
    }
  }
</script>

3 效果

Vuex的actions属性的具体使用

vuex action和mutations的区别

action的功能和mutation是类似的,都是去变更store里的state,不过action和mutation有两点不同:

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

2、action改变状态,最后是通过提交mutation

使用方式: 

安装:

npm install vuex --save

引用:

store.js

方法一:

/**
 * 创建完文件后需要去到main.js中引入成全局
 */
import Vue from "vue";
import Vuex from "vuex";
//使用vuex
Vue.use(Vuex);
const state = {
 targetUser: {} //用户详细资料数据
};
 
const getters = {
 //获取到用户状态,//实时监听state值的变化(最新状态)
 targetUser: state => state.targetUser
};
 
const mutations = {
 //自定义改变state初始值的方法
 SET_TARGET_USER(state, targetUser) {
  if (targetUser) {
   state.targetUser = targetUser; //如果targetUser有内容就赋给状态信息
  } else {
   //如果没内容就给targetUser赋空对象
   state.targetUser = {};
  }
 }
};
 
const actions = {
 //这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性
 // 页面定义的setGargetUser,targetUser为页面传过来的值
 setGargetUser({ commit }, targetUser) {
  commit("SET_TARGET_USER", targetUser);
 }
};

存储页面:

this.$store.dispatch('setGargetUser',friend)

获取页面:

computed:{
    // 提示vuex中存入的用户详细资料
    targetUser(){
      return this.$store.getters.targetUser
    }
   },

以上方法有一个问题就是如果多人开发;会出现不利于管理,下面用一个方法定义一个常量

存储:

this.$store.dispatch('setUser',decode)

store.js

/**
 * 创建完文件后需要去到main.js中引入成全局
 */
import Vue from "vue";
import Vuex from "vuex";
// 持久存储插件
import createPersistedState from "vuex-persistedstate";
 
//使用vuex
Vue.use(Vuex);
 
/**
 * 在需要多人协作的项目中,我们可以使用常量代替mutation 事件类型。这在各种 Flux 实现中是很常见的模式。同时把这些常量放在单独的文件中可以让协作开发变得清晰。
 * 定义存储信息
 *
 *  */
 
const types = {
 SET_TARGET_USER: "SET_TARGET_USER" //详细资料
};
 
const state = {
 //用户初始化的状态
 targetUser: {} //用户详细资料数据
};
const getters = {
 //获取到用户状态,//实时监听state值的变化(最新状态)
 targetUser: state => state.targetUser
};
const mutations = {
 //自定义改变state初始值的方法
 
 [types.SET_TARGET_USER](state, targetUser) {
  if (targetUser) {
   state.targetUser = targetUser; //如果targetUser有内容就赋给状态信息
  } else {
   //如果没内容就给targetUser赋空对象
   state.targetUser = {};
  }
 }
};
 
const actions = {
 //这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性
 setGargetUser({ commit }, targetUser) {
  commit(types.SET_TARGET_USER, targetUser);
  // localStorage.setItem("SET_TARGET_USER", JSON.stringify(targetUser));
 }
};
export default new Vuex.Store({
 state,
 mutations,
 getters,
 actions,
});

取值:

this.$store.getters.targetUser

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
JavaScript中return false的用法
Mar 12 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 #Javascript
vue自定义指令之面板拖拽的实现
Apr 14 #Javascript
详解Vue组件之间通信的七种方式
Apr 14 #Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 #Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 #Javascript
详解如何理解vue的key属性
Apr 14 #Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 #Javascript
You might like
PHP VS ASP
2006/10/09 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript Demo模态窗口
2009/12/06 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
Java设计中的Builder模式的介绍
2018/03/22 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Pytorch转tflite方式
2020/05/25 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
师恩难忘教学反思
2014/04/27 职场文书
运动会演讲稿200字
2014/08/25 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
入党函调证明材料
2014/12/24 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
退休教师追悼词
2015/06/23 职场文书