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 格式字符串的应用
Mar 29 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
html5调用摄像头截图功能
Jan 18 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 批量生成html,txt文件的实现代码
2013/06/26 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Python pandas常用函数详解
2018/02/07 Python
python实现可逆简单的加密算法
2019/03/22 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
行政专员工作职责
2013/12/22 职场文书
外贸业务员工作职责
2014/01/06 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
大课间活动实施方案
2014/03/06 职场文书
银行求职自荐信范文
2015/03/04 职场文书
同学会感言
2015/07/30 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android