账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vux mapState拿不到数据 mapGetters拿到数据了但是打印为空。
    27
    0

    最近在用学习vuex,组件mapState,mapGetters拿数据出现了问题求教

    首先我封装了axios get请求 文件为http.js

    请输入import axios from 'axios'
    import qs from 'qs'
    axios.defaults.timeout = 10000;
    export function get(url, params) {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                params: params
            }).then(res => {
                resolve(res.data);
            }).catch(err => {
                reject(err.data)
            })
        });
    }

    然后在api.js 中暴露出来首页的数据请求

    import {get,post} from './http'
    // const url = '/api/'
    // 首页总数据
    export const indexRequest = p =>get('/api/getIndex',p)
    

    在vuex中建立了一个首页模块 home.js

    import {
        indexRequest
    } from "@/request/api"
    import {
        RECEIVE_INDEXDATAS
    } from '../types'
    const state = {
        gtId: 0,
        indexRequestData: []
    }
    
    const getters = {
        indexRequestData:state=>state.indexRequestData
    }
    
    const mutations = {
        [RECEIVE_INDEXDATAS](state, {
            indexRequestData
        }) { 
            state.indexRequestData = indexRequestData
        },
        gtIdChange: function (state, gtId) {
            state.gtId = gtId
        }
    }
    
    const actions = {
        async requestIndex({
            commit,
            state
        }) {
            const {
                gtId
            } = state
            const indexRequestData = await indexRequest({
                firstFl: gtId
            })
            commit(RECEIVE_INDEXDATAS, {
                indexRequestData
            })
        }
    }
    export default {
        state,
        getters,
        mutations,
        actions
    }

    在vuex index.js中调用了home.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import home from './modules/home'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
    
      modules: {
        home
      }
    });

    最后在我的组件 home.vue中

    import { mapState,mapGetters } from "vuex";
    import { indexRequest } from "@/request/api";
    export default {
      name: "home",
      data() {
        return {
        };
      },
      mounted() {
        this.$store.dispatch("requestIndex");
        console.log(this.indexRequestData)
      },
      methods: {
      },
      computed: {
        ...mapGetters(["indexRequestData"])
      }
    };

    在home.vue中 用mapState拿state中数据渲染不到页面上
    用mapGetters拿数据可以渲染到页面上但是console.log(this.indexRequestData)为空值。
    我现在想对拿到的数据indexRequestData做处理在分发给各个组件 请问怎么解决?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 向前冲 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部