Question

我有一个提供预订表的组件；当我在另一个组件中更新商店时，表不会更新（但是商店会更新，所以计算的属性也会更新；我的猜测是问题与过滤器未更新有关，但我不确定。 / p>

为此，我有一家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方法设置为计算属性，该属性将返回过滤后的结果，并且还会根据状态更改进行更新。

在另一个组件上执行vuex操作后，vue.js组件未更新

1 个答案: