状态管理之Vuex (二) 异步管理
Vuex
咋操作异步啊?多个异步需要在一起调用咋办?莫方,Vuex
可以来给你解决一下子。
上篇回顾
我们在组件中调用函数, 然后直接利用store -> commit
去触发mutation -> changeState
, 这样的话怎么增加一个异步操作? 先上篇提到,可以现在组件里面进行异步,然后再去commit
,但是这样Vuex
起到的作用就微乎其微啊。其实它也有解决办法,来look look
利用Action异步获取用户列表并展示出来
Vuex
核心概念Action
, 其实学过redux
、Mobx
等状态管理的一看就知道了。但是,没错,其实是一样的意思,哈哈哈哈。
我们之前是直接在组件中commit
, 使用action
的话就可以我们去调用action
,由action
来调用commit
。
- src/store/index.js
/**
* Created By 憧憬
*/
import Vuex from 'vuex';
import Vue from "vue";
Vue.use(Vuex);
// 设置初始状态
const state = {
userList: []
};
// 设置修改的mutation
const mutations = {
setUserList(state, users) {
state.userList = [...users];
},
};
// 设置action
const actions = {
// 例如还有个action 以下为伪代码
async getUserInfo({commit}) {
const userInfo = await fetch('xxxxx');
commit('setUserInfo', userInfo);
}
// 因为action里面处理异步 利用ES6语法 async要优雅一点啦
async getUserList(context) {
// 异步获取数据
const users = await fetch('http://jsonplaceholder.typicode.com/users').then(res => res.json())
// 去调用mutations里面的函数
context.commit('setUserList', users);
// 组合action 相互调用 伪代码
context.dispatch('getUserInfo')
},
};
// action context这个相当于是这个store里面的实例 里面包含着 commit dispatch getters等 也就是可以在action之间相互调用action
const store = new Vuex.Store({
state: state,
mutations: mutations,
actions: actions // 注入action
});
export default store;
- views/Home/Home.vue
<template>
<div class="VuexDemo">
<div>
<div>
user List
</div>
<div>
-------------------
</div>
<div v-for="(item) in userList" :key="item.id">
{{item.name}}
</div>
</div>
</div>
</template>
<script>
// import store from '../../store/index';
import { mapState, mapActions, mapGetters } from 'vuex';
export default {
created() {
// 这个是正常利用store分发
// store.dispatch({
// type: 'getUserList'
// });
// 这个是因为利用了mapActions来映射,根mapState起到的作用是一样,所以不多赘述
this.getUserList();
},
computed: {
// 对状态进行映射
...mapState(['userList']),
},
methods: {
// 对action进行映射,也是为了避免action过多,写一些无用代码的
...mapActions(['getUserList'])
}
};
</script>
- 效果
利用Getter进行store.state 组合成新的用户列表
在Vuex
里面,还有一个核心概念getter
。
这是一个可以基于store
里面的state
派生出来新的数据,跟computed
类似,作用都是一样的
比方说: 根据上面的例子,我还需要一个列表,但是我只要id <= 5的用户, 但是我已经懒得再去调用action
, 然后获取数据再展示。getter
和computed
的差不多,都是提供了类似data
的状态
- src/store/index.js
// 在getter里面键对应的函数 会自动获取到state, 但是不能在这里面修改state 别乱搞
const getters = {
userCount: state => state.userList.filter(item => item.id <= 5)
};
const store = new Vuex.Store({
state: state,
mutations: mutations,
actions: actions,
getters: getters // getters也注入进去了
});
- views/Home/Home.vue
<div v-for="(item, index) in userCount" :key="'info' + index">
{{item.name}}
</div>
// mapGetters 也是跟mapState一样的道理 直接映射在computed里面 然后直接在模版中使用
computed: {
...mapState(['userList']),
...mapGetters(['userCount'])
},
这里有个值得注意的地方,就是在模版中遍历两个数组,key
不能一样,也就是我在遍历第一个数组时使用index
。我在遍历getter
的数组时,是对key
进行字符串拼接了,这也是Vue
的基本知识,这里提一下,避免踩坑
看到现在,Vuex
的基本知识其实差不多, 但是由于商业项目一般都比较复杂, 了解这些还是不太够滴, 一般项目模块比较多, 如果一直在这个store
里面写方法写状态的话比较麻烦, 并且还会出现程序员最讨厌的问题?这tm怎么起名? so Vuex
如何解决, 请看下篇!
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。
- PyQt5 GUI应用程序工具包入门(1)
- grpc部署初体验
- Java中的ReentrantLock和synchronized两种锁机制的对比
- 用Python从零开始创建区块链
- 基于 Python 的僵尸网络将 Linux 机器变成挖矿机器人
- Oracle导入导出常用命令
- Spring Cloud实战小贴士:Zuul处理Cookie和重定向
- 设计模式之代理模式(二)CGLIB动态代理实现
- ios手势复习值之换图片-转场动画(纯代码)
- 顺序广播和无序广播
- Netflix Zuul与Nginx的性能对比
- 最有价值的50道java面试题(一)
- 用 Python 从零开始玩微信跳一跳
- ios地图小例子和手势的使用 供大家参考一下呦
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法