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 相关文章推荐
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
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/04/09 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
javascript实现单击和双击并存的方法
2014/12/13 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
解决python3输入的坑——input()
2020/12/05 Python
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
生产经理的自我评价分享
2013/11/07 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
学习保证书
2015/01/17 职场文书
九华山导游词
2015/02/03 职场文书
员工辞职信范文大全
2015/05/12 职场文书
拉贝日记观后感
2015/06/05 职场文书
找规律教学反思
2016/02/23 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS