- 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积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

