状态管理之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如何解决, 请看下篇！

本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。