vue.js - 从 vuex api 请求初始化 Vue 组件中的数据

Question

从 vuex 存储中的异步 api 调用初始化 Vue 组件中数据的最简单方法是什么。在数据可用之前安装组件。

考虑:

export default {
data () {
  return {
    loanAmount: 300000,
    thirtyFixedAPR: null,
    fifteenFixedAPR: null,
    fiveArmAPR: null
  }
},
methods: {
  fetchRates () {
    this.thirtyFixedAPR = this.$store.state.rates.thirtyFixed.apr
    this.fifteenFixedAPR = this.$store.state.rates.fifteenFixed.apr
    this.fiveArmAPR = this.$store.state.rates.fiveArm.apr
  }
},
mounted () {
  this.fetchRates()
}}

我想在 vuex 存储中的 api 调用完成后调用一次 fetchRates 方法。我会使用计算属性，但我只想初始化数据，而不是观察它。我已经尝试了一些使用看起来不太优雅的观察者的变通方法，我觉得对此有一个更简单的答案。

感谢您的帮助。

Answer 1

你需要在 Vuex 中使用订阅。

基本上；

const myMutationListener = this.$store.subscribe((mutation, state) => {
  if (mutation.type === 'MY_MUTATION_INSIDE_VUEX'){
   this.parameter1 = mutation.payload.parameter1
   this.parameter2 = mutation.payload.parameter2
  }
})