Vuex 未返回預期的 state

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

數據 object 在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>

前參考