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小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 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 面向对象详解
2012/09/13 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
详解如何设置Python环境变量?
2019/05/13 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
简历上的自我评价
2014/02/03 职场文书
通用自荐信范文
2014/03/14 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
生死抉择观后感
2015/06/09 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL