Vuex 調度不返回視圖中的數據

Question

我無法從 vuex 獲取我的數據並在所有視圖中使用它們，但我確實在網絡選項卡中看到了它們的成功結果。

截圖

network tab

console

代碼

store.js

state: {
    currency: {}
},
mutations: {
    currency(state, currency){
      state.currency = currency
    }
},
actions: {
    currency({commit}){
      return new Promise((resolve, reject) => {
        commit('currency')
        axios({url: '/api/currencyDefault', method: 'GET' })
        .then(resp => {
          const currency = resp.data.data
          commit('currency', currency)
          resolve(resp)
        })
        .catch(err => {
          commit('currency')
          reject(err)
        })
      })
    },
},
getters: {
    currency: state => state.currency,
}

App.vue (main component where routers will load)

<script>
export default {
  props:['currency'],
  data() {
    return {
      isCollapse: true,
    }
  },
  created () {
    this.currency()
  },
  methods: {
    currency() {
      this.$store.dispatch('currency')
   }
  },
}
</script>

然后在我的其他組件中，我調用貨幣，例如：

{{currency.name}}

想法？

Answer 1

方法貨幣已經定義為道具。 在您的代碼中刪除它。

props:['currency']

10 像這樣在你的組件中調用這種貨幣

<div>
   {{this.$store.getters.currency.name}}
</div>

為了確保顯示貨幣，我所做的是首先設置一個條件來檢查它是否已經加載。 像這樣

<div v-if="$store.getters.currency">
      {{this.$store.getters.currency.name}}
  </div>

或在您的數據中聲明一個新變量，例如

data() {
   return {
       currency: this.$store.getters.currency.name
   }
}

現在你可以這樣稱呼它

<div v-if="$store.getters.currency">
     {{currency.name}}
</div>