Vuex的基本使用——异步情况下

如果有多页面，要使用store。并且感觉写在一个页面太乱。我们可以在store文件夹中。在建一个文件。如：user.js

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import user from './user.js';
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {     
    },
    mutations: {     
    },
    actions: {
    },
    modules: {     
        user       
    }
});
export default store;

store/user.js

import axios from 'axios'
import Vue from 'vue'  
export default {
    state: { 
        tableDataUser:[],//用户列表数据 
        userpagesize:10,//table每页显示条数
        userpageindex:1,//table当前页  
        usertotal: 1 //总条数  
    },
    getters: {
        tableDataUser:state=>state.tableDataUser,//用户列表数据
        userpagesize:state=>state.userpagesize,//table每页显示条数
        userpageindex:state=>state.userpageindex,//table当前页
        usertotal:state=>state.usertotal//总条数   
    },
    mutations: { 
        //用户列表数据
        USER_LOAD_DATA(state, {tableDataUser,userpagesize,userpageindex,usertotal}) {
            state.tableDataUser = tableDataUser
            state.userpagesize=userpagesize
            state.userpageindex=userpageindex
            state.usertotal=usertotal     
        }       
    },
    actions: {  
        //加载用户列表数据 
        userloaddatatable({commit}, {path,pagesizeA,pageindexA}){
                var params = {             
                    nickname: namesea,//员工名称查询
                    pageSize: pagesizeA, //每页条数
                    pageNumber:pageindexA, //页数        
                };        
            Vue.axios.get(path,{params}).then(res => {
                if (res.data.retCode == 200) {
                    commit("USER_LOAD_DATA", {
                        tableDataUser: res.data.data.records,
                        usertotal: res.data.data.total,
                        userpagesize: res.data.data.size,
                        userpageindex: pageindexA,
                    })
                }
            })
        }       
    }
}

usertable.vue

<template>
    <div>              
        <Table :data="tableDataUser" :columns="tableColumns"></Table>
        <Page :total="usertotal" :current="userpageindex" :page-size="userpagesize"></Page>
    </div>
</template>
<script src="./usertable.js"></script>

usertable.js

    import Vue from 'vue'
    import {mapActions, mapGetters} from 'vuex'
    export default {
        name:"usertable",
        data() {
            return {   
                 tableColumns:[
                    {
                        title: "员工（昵称）",
                        align: 'center',
                        key: "nickname",
                    },
                    {
                        title: "账号",
                        align: 'center',
                        key: "name",
                    },
                    {
                        title: "主属部门",
                        align: 'center',
                        key: "deptName",
                    },
                    {
                        title: "附属部门",
                        align: 'center',
                        key: "observiceNames",
                    }
                 ]                                                 
            }
        },        
        computed: {
            ...mapGetters(["tableDataUser","userpagesize", "userpageindex", "usertotal"])              
        },
        methods: {
            ...mapActions(["userloaddatatable"]),           
        },
        mounted: function() {          
            var url=this.GLOBAL.API_ACCOUNT + 'users'
            this.userloaddatatable({path:url,pagesizeA: this.userpagesize,pageindexA: this.userpageindex})       
        }
    }