Vue警告：使用axios在实例上未定义属性或方法

Question

我正在为基于axios调用的vuex商店获取方法而苦苦挣扎；

我看到了很多关于同一问题的问题，但是似乎没有一个问题可以解决我的问题。 我想这与异步调用和dom有关，但我没有足够的资格去确切地了解什么。

我正在使用Laravel-mix。

我试图在输入周围放置一个v-if（具有fdc长度），但无济于事。

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import VueRes from 'vue-resource';

Vue.use(Vuex)
//Vue.use(axios)
Vue.prototype.$http = axios
Vue.use(VueRes);

export default new Vuex.Store({
    state: {
        fdc: {
                billet_200: 0,
                billet_100: 0,
                billet_50: 0,
                billet_20: 0,
                billet_10: 0,
                billet_05: 0,
                piece_02: 0,
                piece_01: 0,
                piece_005: 0,
                piece_002: 0,
                piece_001: 0,
                cartouche: 0,
             },
        loading: true
  },
  mutations: {
    loadFDC(state, fdc) {
      state.fdc.billet_200 = fdc.fdc_200
      state.fdc.billet_100 = fdc.fdc_100
      state.fdc.billet_50 = fdc.fdc_50
      state.fdc.billet_20 = fdc.fdc_20
      state.fdc.billet_10 = fdc.fdc_10
      state.fdc.billet_05 = fdc.fdc_05
      state.fdc.piece_02 = fdc.fdc_02
      state.fdc.piece_01 = fdc.fdc_01
      state.fdc.piece_005 = fdc.fdc_005
      state.fdc.piece_002 = fdc.fdc_002
      state.fdc.piece_001 = fdc.fdc_001
      state.fdc.cartouche = fdc.fdc_cartouche
    }
  },
 actions: {
    getFDC ({ commit }) {
      axios
        .get('http://localhost/stardustCaisse/public/api/getfdc/2019-04-23')
        .then(r => r.data)
        .then(fdc => {
        commit('loadFDC', fdc[0])
        console.log(fdc[0])
        })
    }
  },
  getters: {
    calculeTotal: state => {
      var billet200 = parseInt(state.fdc.billet_200, 10) || 0;
      var billet100 = parseInt(state.fdc.billet_100, 10) || 0;
      var billet50 = parseInt(state.fdc.billet_50, 10) || 0;
      var billet20 = parseInt(state.fdc.billet_20, 10) || 0;
      var billet10 = parseInt(state.fdc.billet_10, 10) || 0;
      var billet05 = parseInt(state.fdc.billet_05, 10) || 0;
      var piece02 = parseInt(state.fdc.piece_02, 10) || 0;
      var piece01 = parseInt(state.fdc.piece_01, 10) || 0;
      var piece005 = parseInt(state.fdc.piece_005, 10) || 0;
      var piece002 = parseInt(state.fdc.piece_002, 10) || 0;
      var piece001 = parseInt(state.fdc.piece_001, 10) || 0;
      var cartouche = parseInt(state.fdc.cartouche, 10) || 0;

      return (billet200 * 200) + (billet100 * 100) + (billet50 * 50) + (billet20 * 20) + (billet10 * 10) + (billet05 * 5) + (piece02 * 2) + (piece01 * 1) + (piece005 * 0.5) + (piece002 * 0.2) + (piece001 * 0.1);
    }
  }
})

在我的组件中：

<script>
  import { mapState } from 'vuex'
  import { mapGetters } from 'vuex'
    export default {
    mounted () {
        this.$store.dispatch('getFDC')
      },
        computed: 
      mapState(['fdc']),
      ...mapGetters(['calculeTotal'])
    }
</script>

...

<input id="fdc_total" name="fdc_total" type="text" class="form-control" placeholder="Total" v-model="calculeTotal">

错误如下：[Vue警告]：属性或方法“ calculeTotal”未在实例上定义，但在渲染期间被引用

任何帮助我走上正确道路的帮助将不胜感激！

Answer 1

计算块的开头是否缺少花括号？ 尝试...

computed:{
  ...mapState(['fdc']),
  ...mapGetters(['calculeTotal'])
}