Vue, Vuex и пустое состояние - PullRequest
Новая
       54

Vue, Vuex и пустое состояние

0 голосов
/ 19 сентября 2019

Доброе утро всем.

В течение нескольких дней я боролся с приложением, которое пытался создать для некоторого опыта.Я сделал довольно много, но теперь застрял на странице редактирования, так как просто не могу понять сторону управления состоянием.

Итак, вот моя проблема.

У меня есть кнопка на моей странице профиля.vue, что если я нажму на нее, то отправит меня на страницу EditInvoice.vue. 

<button @click="onSubmit"><router-link to="/edit-invoice">Edit</router-link></button>

my store.js состояние: 

state: {
    invoice: [],
  },

Затем в моем store.js у меня будетследующие в моих действиях: 

actions: {
      invoiceCollection({commit}) {
        database.collection('invoices')
          .get()
          .then((querySnapShot) => {
            querySnapShot.forEach((doc) => {

              const curInvData = doc.data();

              commit('invoice', curInvData);

              })
          })
      }
  },

Это действие получает нужные мне данные из хранилища и должно выглядеть следующим образом. 

clientDetails: "Kleinzee↵32b ZonderBerg Ave↵8282"
dateCreated: "September 15th 2019"
invoice: Array(2)
invoiceSubTotal: "R 167,50"
invoiceTotal: (...)
itemPaid: (...)
userId: (...)
userName: (...)

Затем я изменяю свое состояние (store.js): 

mutations: {
    invoice: (state, payload) => state.invoice = payload,
  },

и затем использовать метод получения (store.js): 

getters: {
    // Get Invoice data from state
    invoice: state =>  {
      return state.invoice
    },
  },

Затем я импортирую mapGetters в свой компонент (EditInvoice.vue) ... итерацию по моему получателю в соответствии с моим вычисленным значениемсвойство с ...mapGetters(['invoice']),

, а затем использовать простую функцию с консольным журналом и использовать ловушку жизненного цикла. 

created() {
   this.currentInvoice();
  },
methods: {
   ...mapActions(['invoiceCollection']),

currentInvoice() {
   console.log(this.invoice)
 },

Я очень новичок в программировании и просто хотел бы знать,почему мои геттеры, а все остальное всегда возвращает пустой Observer 

[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array

при первых нескольких попытках.И затем, после нескольких нажатий на кнопку редактирования в ProfilePage.vue, в итоге отображаются правильные данные

Я искал ту же проблему и обнаружил несколько случаев, но ни один из них не помог мне.Это упрощенная версия, которую я раздели.Все, что я хочу знать, это то, почему мое состояние не является постоянным.Данные там просто не отображаются при загрузке первой или второй страницы.

Любая помощь будет принята с благодарностью.

...