Компонент Vue не реагирует на обновления Vuex

ProgramBox

Компонент Vue не реагирует на обновления Vuex

Post author:admin
Запись опубликована:17 октября, 2022
Post category:Вопросы по программированию

#javascript #vue.js #vuex

#JavaScript #vue.js #vuex

Вопрос:

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

вводим некоторый код сейчас

./store/index.js

 import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
   greenboard :{
     station: 1,
     incomplete_orders:[],
     complete_orders:[],
   },
   yellowboard:{
     incomplete_orders:[],
     complete_orders:[],
   },
   dashboard:{

   },
 },
 getters: {
   greenIncomplete: state => {
     return state.greenboard.incomplete_orders;
   },

   greenComplete: state => {
     return state.greenboard.complete_orders;
   },

   greenStation: state => {
     return state.greenboard.station;
   }
 },
 mutations: {
   updateGreenOrders (state,payload){
     state.greenboard.incomplete_orders = payload.incomplete_orders;
     state.greenboard.complete_orders = payload.complete_orders;
   },
   updateGreenStation (state,payload){
     Vue.delete(state.greenboard, 'station');
     Vue.set(state.greenboard, 'station', payload.station);
     console.log(state.greenboard)
   }
 },
 actions: {}
});

/app.js

 /**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');


/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('green-orders', require('./components/GreenOrders.vue').default);
Vue.component('stations-nav', require('./components/StationsNav.vue').default);
Vue.component('green-board', require('./components/GreenBoard.vue').default);
Vue.component('order-card', require('./components/OrderCard.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
import store from "./store";
const app = new Vue({
    store,
    el: '#app',
});

StationsNav.vue

 <template>
  <ul>
    <li v-for="station in stations" v-bind:key="station.id" v-on:click="stationChange(station.id)">{{station.station_name}}<br />{{station.description}}</li>
  </ul>
</template>

<script>
    export default {
      name:'StationsNav',
      components:{},
      data(){
          return {
            stations: [],
            chosen_station:0 ,
            error:"",
          }
      },
      created(){
        this.fetchStations();
      },

      methods:{
        async fetchStations(){
          try{
            const res = await axios.get('/internal/stations/');
            this.stations = res.data.data;
          }catch(e){
            console.log(e);
          }

        },

        stationChange(stationId){
          this.$emit("stationChange",{
            id:stationId
          });
        }
      },
      mounted() {

      }
    }
</script>

GreenOrders.vue

   <template>
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md">
          <h3>Green Orders</h3>
          <p>
            These orders are referenced from the Woocomerce system for orders that are ready to be shipped.
          </p>
          <order-card
          v-on:orderstatuschange = "changeOrderStatus"
          v-for="order in orders_incomplete"
          v-bind:key="order.id"
          v-bind:id="order.id"
          v-bind:order_id = "order.order_id"
          v-bind:number_of_items = "order.number_of_items"
          v-bind:completion = "order.completion"
          ></order-card>
        </div>
        <div class="col-md">
          <h4>Monitor Completed Orders</h4>
          <p>
            Completed orders eventually fall out of the system once their status is updated in Woocomerce
          </p>
          <order-card
          v-on:orderstatuschange = "changeOrderStatus"
          v-for="order in orders_complete"
          v-bind:key="order.id"
          v-bind:id="order.id"
          v-bind:order_id = "order.order_id"
          v-bind:number_of_items = "order.number_of_items"
          v-bind:completion = "order.completion"
          ></order-card>
        </div>
      </div>
      <div v-on:click="buttontest">
        BUTTON
      </div>
    </div>
  </template>

<script>
    export default {
      name:'OrdersDisplay',
      components:{},
      data(){
          return {
            orders_incomplete: [],
            orders_complete: [],
            error:"",
            station: this.$store.getters.greenStation
          }
        },

      created(){
        this.fetchIncomplete(this.station);
        this.fetchComplete(this.station);
      },

      methods:{
        async fetchIncomplete(station){
          try{
            const res = await axios.get('/internal/green-orders/' station '/0/');
            this.$store.commit({
              type:"updateGreenOrders",
              incomplete_orders: res.data.data,
            });
            this.orders_incomplete = this.$store.getters.greenIncomplete;
          }catch(e){
            console.log(e);
          }

        },
        async fetchComplete(station){
          try{
            const res = await axios.get('/internal/green-orders/' station '/1/');
            this.$store.commit({
              type:"updateGreenOrders",
              complete_orders: res.data.data,
            });
            this.orders_complete = this.$store.getters.greenComplete;
          }catch(e){
            console.log(e);
          }
        },

        async changeOrderStatus(order){
           try{
             const res = await axios.post('/internal/order/' order.id '/' order.status '/');
             this.orders_complete = res.data.data;
             this.fetchIncomplete(this.station);
             this.fetchComplete(this.station);
           }catch(e){
             console.log(e);
           }
        },

        buttontest(){
          console.log(this.$store.getters.greenStation); /*ATS:DEBUG REMOVE*/
          this.station = this.$store.getters.greenStation;
        }

      },

      mounted() {
      }
    }
</script>

GreenBoard.vue

 <template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-3">
        <stations-nav v-on:stationChange="updateGreenStation"></stations-nav>
      </div>
      <div class="col-9">
        <green-orders></green-orders>
      </div>
    </div>
  </div>
</template>

<script>

    export default {
      name:'GreenBoard',
      components:{},
      data(){
          return {
            station: this.$store.getters.greenStation
          }
      },

      created(){

      },

      methods:{
        updateGreenStation(station){
          this.$store.commit({
            type:"updateGreenStation",
            station: station.id,
          });
          this.station = this.$store.getters.greenStation;
        }
      },
      mounted() {

      }
    }
</script>

Вот снимок экрана отображаемого кода

Когда я нажимаю на вторую станцию, обновляющую хранилище в index.js а затем я нажимаю кнопку word, которая делает консоль.выйдите из правильной станции. Однако заказы не обновляются в зависимости от станции, которая есть в магазине, она просто продолжает работать со станцией по умолчанию. Теперь я мог бы установить эту кнопку для отмены заказов, но я чувствую, что мне как-то не хватает чего-то, что я новичок в VUE, но не javascript. Я чувствую, что это может иметь какое-то отношение к наблюдателю или действию в Vuex, но, честно говоря, я в некоторой растерянности. Заранее благодарю вас.

1. Я вижу, что вы копируете некоторые геттеры в локальные данные, обычно это плохая идея, если вам действительно не нужна локальная ссылка на эти данные (когда значение getter изменяется, ваши локальные данные этого не сделают). Кроме того, кажется, что вы получаете заказы только при GreenOrders создании компонента, вы не обрабатываете случай при смене станции?

2. Я действительно новичок в vue и реактивной разработке. Я думал, что геттеры должны были позволять мне ссылаться на данные в хранилище, чтобы они могли изменяться. Какой другой метод я должен использовать? Что касается заказов на загрузку при смене станции, да, это так, я не знаю, какую часть использования мне нужно использовать для перезагрузки этих вещей при смене станции. На данный момент я настроил событие on click, которое перезагружает все это, но это не идея. Научи меня, о мудрый. Заранее благодарю вас.

Ответ №1:

Итак, проблема заключалась в непонимании того, как действия работают в Vuex. Что происходило, так это то, что асинхронный вызов не вызывал перерисовку заказов. Чтобы сделать что-то асинхронное, вам нужно использовать действия в Vuex. Это позволяет что-то вроде вызова api и ожидания этого разрешения, прежде чем передавать эту информацию в состояние посредством мутаций, которые являются реактивной частью vuex. Это также означало, что мне пришлось преобразовать большую часть моих локальных данных в вычисляемые данные и вернуть содержимое хранилища вместо использования геттеров для заполнения моего локального хранилища.

Это также позволило мне затем обновить компонент station nav для правильного использования хранилища vuex.

Ниже я публикую измененные файлы, которые теперь работают должным образом.

/store/index.js

 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    greenboard :{
      station: 1,
      incomplete_orders:[],
      complete_orders:[],
    },
    yellowboard:{
      incomplete_orders:[],
      complete_orders:[],
    },
    dashboard:{

    },
  },
  getters: {
    greenIncomplete: state => {
      return state.greenboard.incomplete_orders;
    },

    greenComplete: state => {
      return state.greenboard.complete_orders;
    },

    greenStation: state => {
      return state.greenboard.station;
    }
  },
  mutations: {
    updateGreenOrders (state,payload){
      console.log(payload);
      state.greenboard.incomplete_orders = payload.incomplete_orders;
      state.greenboard.complete_orders = payload.complete_orders;
      state.greenboard.station = payload.station;
    },
    updateGreenStation (state,payload){
      Vue.delete(state.greenboard, 'station');
      Vue.set(state.greenboard, 'station', payload.station);
    }
  },
  actions: {
    async updateGreenOrders(context,payload){
      try{
        const incomplete = await axios.get('/internal/green-orders/' payload.station '/0/');
        const complete = await axios.get('/internal/green-orders/' payload.station '/1/');
        context.commit({
          type:"updateGreenOrders",
          incomplete_orders: incomplete.data.data,
          complete_orders:complete.data.data,
          station:payload.station
        });
      }catch(e){
        console.log(e);
      }
    }
  }
});

StationsNav.vue

 <template>
  <ul>
    <li v-for="station in stations" v-bind:key="station.id" v-on:click="stationChange(station.id)">{{station.station_name}}<br />{{station.description}}</li>
  </ul>
</template>

<script>
    export default {
      name:'StationsNav',
      components:{},
      data(){
          return {
            stations: [],
            chosen_station:0 ,
            error:"",
          }
      },
      created(){
        this.fetchStations();
      },

      methods:{
        async fetchStations(){
          try{
            const res = await axios.get('/internal/stations/');
            this.stations = res.data.data;
          }catch(e){
            console.log(e);
          }

        },

        stationChange(stationId){
          this.$store.dispatch({
            type:"updateGreenOrders",
            station:stationId
          });
        }
      },
      mounted() {

      }
    }
</script>

GreenOrders.vue

   <template>
    <div class="container-fluid">
      <!--button class="buton" v-on:click="debug">
        debug
      </button-->
      <div class="row justify-content-center">
        <div class="col-md">
          <h3>Green Orders Station {{station}}</h3>
          <p>
            These orders are referenced from the Woocomerce system for orders that are ready to be shipped.
          </p>
          <order-card
          v-on:orderstatuschange = "changeOrderStatus"
          v-for="order in orders_incomplete"
          v-bind:key="order.id"
          v-bind:id="order.id"
          v-bind:order_id = "order.order_id"
          v-bind:number_of_items = "order.number_of_items"
          v-bind:completion = "order.completion"
          ></order-card>
        </div>
        <div class="col-md">
          <h4>Monitor Completed Orders</h4>
          <p>
            Completed orders eventually fall out of the system once their status is updated in Woocomerce
          </p>
          <order-card
          v-on:orderstatuschange = "changeOrderStatus"
          v-for="order in orders_complete"
          v-bind:key="order.id"
          v-bind:id="order.id"
          v-bind:order_id = "order.order_id"
          v-bind:number_of_items = "order.number_of_items"
          v-bind:completion = "order.completion"
          ></order-card>
        </div>
      </div>

    </div>
  </template>

<script>
    export default {
      name:'OrdersDisplay',
      components:{},
      data(){
          return {
            error:"",
          }
        },
      computed: {
        orders_incomplete(){
          return this.$store.state.greenboard.incomplete_orders;
        },
        orders_complete(){
          return this.$store.state.greenboard.complete_orders;
        },
        station(){
          return this.$store.state.greenboard.station;
        }
      },
      created(){
        this.fetchOrders(this.station);
      },

      methods:{
        fetchOrders(station){
          this.$store.dispatch({
            type:"updateGreenOrders",
            station:this.station
          });
        },

        async changeOrderStatus(order){
           try{
             const res = await axios.post('/internal/order/' order.id '/' order.status '/');
             this.fetchOrders(this.station);
           }catch(e){
             console.log(e);
           }
        },

        intervalUpdate(){
          var s = this;
          setInterval(function () {
            s.fetchOrders(s.station);
          }, 1000);
        },

        debug(){
          console.log("I'M THE CREAM OF THE CROP!")
        }

      },

      mounted() {
        //this.intervalUpdate();
        //this.fetchIncomplete(this.station);
        //this.fetchComplete(this.station);
        //console.log(this.$store.state.greenboard.incomplete_orders);
      }
    }
</script>

GreenBoard.vue

 <template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-3">
        <!--stations-nav v-on:stationChange="updateGreenStation"></stations-nav-->
        <stations-nav></stations-nav>
      </div>
      <div class="col-9">
        <green-orders></green-orders>
      </div>
    </div>
  </div>
</template>

<script>

    export default {
      name:'GreenBoard',
      components:{},
      data(){
          return {
          }
      },

      created(){

      },

      methods:{

      },
      mounted() {

      }
    }
</script>

Документация, которая осветила проблему: https://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components

Заключение

Чтобы упростить проблему, чтобы она, надеюсь, была полезна другим в будущем. Если вы используете Vuex, вам нужно использовать мутации, чтобы быть реактивным. Если что-то является асинхронным, вам нужно использовать действие, и цикл выглядит следующим образом.

действие отправки -> действие разрешения -> результаты фиксации -> vue реагирует.

Если у кого-либо из других более опытных пользователей на сайте есть дополнительные данные, пожалуйста, дайте мне знать. Спасибо Decade Moon за комментарий, который направил меня по этому пути.

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Неперехваченный (в обещании): ошибка ссылки: videoTrimModal не определен

Защитите WordPress Rest API для доступа только из моего приложения для Android

Как добавить класс к элементу списка с помощью jQuery