Vuex 未返回预期状态

Question

如果用户没有交易，我有一个弹出模式应该出现。 depositHistory 是包含这些交易的数组。如果其长度大于 0，则弹出窗口应保持隐藏。如果其长度等于 0，则弹出窗口应呈现。

我使用的用户帐户有 2 笔交易。弹出窗口不应该显示，但确实显示。 console.log() 返回一个不正确的空数组。我还有其他人编写的另一个组件，它以相同的方式使用 depositHistory 并且按预期工作。

组件：

<template>
  <div v-if='renderModal'>
    <p>Fund your account</p>
  </div>
</template>

<script>
const DepositGetter = namespace("deposit").Getter

const AppProps = Vue.extend({
data: () => {
  return {
    renderModal: false
  }
},
beforeMount() {
  // renders modal if user has no transactions
  if (this.depositHistory.length === 0) this.renderModal = true

  console.log(JSON.parse(JSON.stringify(this.depositHistory)))
  // usually returns [__ob__: Observer]
  // added JSON methods so now it logs []
}

export default class HomeGameBanner extends AppProps {
  @DepositGetter depositHistory
}
</script>

我认为您不需要这个，但以防万一。

商店：

type DepositGetter = GetterTree<DepositState, RootState>;

export const getters: DepositGetter = {
  depositHistory: state => state.content
};

export const deposit: Module<DepositState, RootState> = {
  getters
}

Answer 1

数据对象在 beforeMount 之后初始化，所以尝试在 mounted 中执行 像这样

<template>
  <div v-if='renderModal'>
    <p>Fund your account</p>
  </div>
</template>

<script>
const DepositGetter = namespace("deposit").Getter

const AppProps = Vue.extend({
data: () => {
  return {
    renderModal: false
  }
},
mounted() {
this.$nextTick(function () {
  // renders modal if user has no transactions
  if (this.depositHistory.length === 0) this.renderModal = true

  console.log(JSON.parse(JSON.stringify(this.depositHistory)))
  // usually returns [__ob__: Observer]
  // added JSON methods so now it logs []
})
}

export default class HomeGameBanner extends AppProps {
  @DepositGetter depositHistory
}
</script>

前参考