#javascript #vue.js #state #vuex #lifecycle
Вопрос:
Поэтому моя проблема в том, что я не могу видеть переменную coolEventScore при загрузке страницы. Я не знаю, связано ли это с жизненными циклами, или, может быть, я перегружаю функциональность внутри функции vuex getListStats ()… Может ли кто-нибудь пролить немного света на это?
account.js
import Vue from 'vue'
import {achost} from '../constants';
const state = () => ({
coolEventScore: {}
});
const actions = {
getListStats(context) {
return Vue.axios.get(
`xxxx/xxxx`, {}, {
headers: {
'XXXX': 'xxxx',
'XXXX': xxxx
}
}).then((resp) => {
let events = resp.data['event_info'];
let coolEvt = events.filter(evt => evt.src === "coolEvt")[0];
let coolEvtScore = coolEvt .score;
context.commit("setCoolEventScore", coolEvtScore)
return events;
}).catch((err) => {
console.log(err)
})
},
}
const mutations = {
setCoolEventScore(state, value) {
state.coolEventScore = value;
}
}
export const account = {
namespaced: true,
actions,
mutations,
state
}
Круто.ву
<template>
<div>
<span :html="coolEventScore"></span>
</div>
</template>
<script>
import store from "../../../store";
import { mapState } from "vuex";
import { account } from "../../../store/modules/account";
if (!store.state.account) store.registerModule("account", account);
export default {
name: "Cool",
components: {},
created() {
this.fetchEvents();
},
computed: {
...mapState("account", {
coolEventScore: (state) => state.coolEventScore
}),
},
methods: {
fetchEvents() {
this.$store.dispatch("account/getListStats");
}
}
}
Комментарии:
1. внутри вашей
setCoolEventScore
мутации вы устанавливаете значениеreferralEventScore
вместоcoolEventScore
2. забыл сменить это имя, но на самом деле это просто фальшивые имена для сохранения конфиденциальности
3. Какова ценность
coolEvtScore
в тот момент, когда вы совершаете свою мутацию?4. Это число, полученное из ответа. Я боюсь, что у него нет времени для обновления информации, и именно поэтому DOM не отражает данные. Но я не уверен, как я мог бы это сделать