How to make component(s) data equal to global object

Question

I want my components to share one piece of global data, which is a global variable that gets set via ajax when my main Vue instance is mounted. However, the component data is empty when I try to set it in the code below. How do I property set a component's data equal to a shared global object?

If it's an ajax problem, how would I get the component to wait for tableData to get set or have my component watch tableData for changes?

//Snippet of what gets return from ajax call
{
  121: {
    table_info: {
    id: "121",
    name: "Test",
    table_number: "51",
    cap: "6",
    seating: "OPEN",
    position_x: "0.19297285",
    position_y: "0.07207237",
    participants_in_tables: "5",
    count: 5
   }
 }
}

//Global
var tableData; //This gets set when the Vue ajax call is complete after being mounted
var width = $(document).width();
var height = $(document).height();

//Vue
Vue.component('tables', {
      data: () => {
        return {
          tables: tableData
        }
      },
      template: `
                <div id="tableContain">
                    <div class='table' v-for="table in tables" :style="computeOffsets(table)">
                        {{table.table_info.name}}
                    </div>
                </div>
            `,
      methods: {
        computeOffsets(table) {
          return {
            top: (table.table_info.position_x * width) + 'px',
            left: (table.table_info.position_y * height) + 'px'
          }
        }
      });

    var app = new Vue({
      el: '#main',
      mounted() {
        $.ajax({
          method: 'POST',
          dataType: 'json',
          url: base_url + 'users/getTableAssignments/' + event_id
        }).done(data => {
          tableData = data; //Set global tableData 
        });
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="main">
  <table></table>
</div>

The problem is the variable isn't reactive because it isn't contained in a vue instance. The recommended approach for global variables in Vue is to use Vuex. Otherwise you'll need to pass tableData as a prop to all your components. — Eric Guan

Tomasz Kostuch Tomasz Kostuch · Accepted Answer · 2017-08-20T09:45:29

The best way is to use vuex https://vuex.vuejs.org/en/intro.html

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    tableData: {}
  },
  mutations: {
    setData (state, tableData) {
      state.tableData = tableData
    }
  },
  actions: {
    getData ({commit}, event_id) {
      $.ajax({
          method: 'POST',
          dataType: 'json',
          url: base_url + 'users/getTableAssignments/' + event_id
        }).done(data => {
            commit('setData', {tableData})
        });
    }
  },
  getters: {
    tableData (state) {
      return state.tableData
    }
  }
})

You can trigger this action in component by this.$store.dispatch('getData', event_id)

Remove tableData from data() and now get data with this.$store.getters.tableData in computed properties:

computed: {
  computedTableData () {
    return this.$store.getters.tableData
  }
}

For easier debugging install https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

How to make component(s) data equal to global object

1 Answers