Vue Warn: свойство или метод не определены в экземпляре с axios - PullRequest
Новая
       14

Vue Warn: свойство или метод не определены в экземпляре с axios

1 голос
/ 02 мая 2019

Я борюсь с геттерами vuex store, основанными на вызовах axios;

Я видел много вопросов по той же проблеме, но ни один из них, похоже, не решил мою проблему.Я думаю, это как-то связано с асинхронными вызовами и 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 warn]: свойство илиМетод "calcleTotal" не определен в экземпляре, но на него ссылаются во время рендеринга

Любая помощь, направленная на правильный путь, будет принята с благодарностью !!

1 Ответ

0 голосов
/ 02 мая 2019

Есть ли отсутствующая фигурная скобка в начале вычисляемого блока?Попробуйте ... 

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