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如何解决, 请看下篇！
本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。
