vue.js組件在另一個組件上執行vuex操作后未更新

Question

我有一個組件可以呈現預訂表; 當我在另一個組件中更新我的商店時，表格沒有更新（但商店確實如此計算屬性;我的猜測是問題與過濾器沒有更新有關，但我根本不確定。

為此，我有一個vuex商店：

...
const store = new Vuex.Store({
  state: {
    bookings: [],
    datesel: '',
  },
  getters: {
    bookings: (state) => {
        return state.bookings
    },
  },
  mutations: {
    SET_BOOKINGS: (state, bookings) => {
        state.bookings = bookings
    },
  },
  actions: {
    setBookings: ({commit, state}, bookings) => {
        commit('SET_BOOKINGS', bookings)
        return state.bookings
    },
  }
})
export default store;

該表基本上是帶過濾器的v-for：

 <template v-for="booking in getBookings( heure, terrain )">

getBookings是一種方法：

getBookings(hour, court) {
              return this.$store.state.bookings.filter(booking => booking.heure == hour && booking.terrain == court);
            }

我有另一個組件，它將通過一種方法更新我的預訂狀態：

bookCourt() {
                axios.post('http://localhost/bdcbooking/public/api/reservations/ponctuelles',
                  {
                        date: this.datesel,
                        membre_id: '1',
                        heure: this.chosenHour,
                        terrain: this.chosenCourt,
                        saison_id: '1'

                  })

              .then(response => {
                // JSON responses are automatically parsed.
                console.log(response.data);

              })
              .catch(e => {
                this.errors.push(e)
              })
              axios.get('http://localhost/bdcbooking/public/api/getReservationsDate?datesel=' + this.datesel)
              .then(response => {
                // JSON responses are automatically parsed.
                console.log(response.data);
                this.bookings = response.data;

              })
              .catch(e => {
                this.errors.push(e)
              })
              $(this.$refs.vuemodal).modal('hide'); 

            }

雖然this.bookings是計算屬性：

computed: {
          bookings: {
            get () {
                return this.$store.getters.bookings
            },
            set (bookings) {
                return this.$store.dispatch('setBookings', bookings)
                console.log('on lance l action');
            }
          }
    }

Answer 1

您的表未更新，因為getBookings是一個簡單的方法，因此不會根據vuex狀態更改再次觸發該方法。

您可以將此getBookings方法作為計算屬性來返回已過濾的結果，並且還將更新狀態更改。