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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
JavaScript中的类继承
Nov 25 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
Angularjs cookie 操作实例详解
Sep 27 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
python 获取网页编码方式实现代码
2017/03/11 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
Python3实现转换Image图片格式
2018/06/21 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
django迁移数据库错误问题解决
2019/07/29 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
UML设计模式笔试题
2014/06/07 面试题
银行实习自我鉴定
2013/10/12 职场文书
党员检讨书
2014/10/13 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
狂人日记读书笔记
2015/06/30 职场文书
2016年党建工作简报
2015/11/26 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
详解Python牛顿插值法
2021/05/11 Python
pt-archiver 主键自增
2022/04/26 MySQL