Визуализация триггера Vue2 на независимом компоненте поверх vuex - PullRequest
0 голосов
/ 15 мая 2018

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

export default {

  store: store,
  . //code logic
  .
  .
  methods: {
    store: {
      //axios async request where on success I trigger store mutation
      self.$store.dispatch('getApprovals', 'testing/approvals'); //I can see in console the store request response
    }
  }
}

, чем второй компонент, который должен повторно отобразить

<template>
    <div class="portlet light">
        <div class="portlet-title tabbable-line">
            <div class="caption">
                <i class="icon-social-twitter font-dark hide"></i>
                <span class="caption-subject bold uppercase">Approvals</span>
            </div>
            <div class="caption" style="float: right;">
            </div>

            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#tab_actions_pending" data-toggle="tab"> Pending </a>
                </li>
                </li>
            </ul>

        </div>
        <div class="portlet-body">
            <div class="tab-content">
                <div class="tab-pane active" id="tab_actions_pending">

                    <div class="mt-actions">
                        <div class="mt-action" v-for="approval in $store.state.approvals.approvals"
                             v-show="approval.status === 'pending'">
                            <div class="mt-action-body">
                                <div class="mt-action-row">
                                    <div class="mt-action-info ">
                                        <div class="mt-action-icon ">
                                            <i class="icon-magnet"></i>
                                        </div>
                                        <div class="mt-action-details ">
                                            <span class="mt-action-author"
                                                  v-show="approval.request_type == 'Timeoff Request'">{{ approval.request_type }} - {{ approval.type }}</span>
                                            <span class="mt-action-author"
                                                  v-show="approval.request_type !== 'Timeoff Request'">{{ approval.request_type }} </span>
                                            <p class="mt-action-desc"
                                               v-show="approval.request_type == 'Timeoff Request'">{{
                                                parseFloat(approval.days).toFixed(1) }} day/s requested</p>
                                            <p class="mt-action-desc"
                                               v-show="approval.request_type == 'Timeoff Request'">{{ approval.from}} -
                                                {{ approval.to}}</p>
                                        </div>
                                    </div>
                                    <div class="mt-action-datetime ">
                                    </div>
                                    <div class="mt-action-buttons ">
                                        <span class="label label-warning"> Pending </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</template>

<script>

    import store from './store';
    import {editItem} from './actions';

    export default {

        vuex: {
            getters: {
                getApprovals: state => {
                    return state.approvals
                }
            }
        },

        store: store,

        created() {
            this.$store.dispatch('getApprovals', 'testing/approvals');
        },


        data() {
            return {
                approvals: {},
                alert: {
                    show: false,
                    type: null,
                    title: null,
                    message: null,
                }
            };
        }
    }
</script>

Как мы справляемся с этими случаями?

...