コンポーネントデータをグローバルオブジェクトと同じようにする方法

Question

コンポーネントにグローバルデータの1つを共有することができます。これは、メインVueインスタンスがマウントされたときにajax経由で設定されるグローバル変数です。ただし、以下のコードで設定しようとすると、コンポーネントデータは空です。コンポーネントのデータを共有グローバルオブジェクトと同じプロパティに設定するにはどうすればよいですか？

ajaxの問題が発生した場合、コンポーネントがtableDataが設定されるまで待つか、コンポーネントがtableDataを監視して変更を行うようにしますか？

//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 
    } 
} 
} 

​​

Answer 1

最良の方法は、あなたがthis.$store.dispatch('getData', event_id)

を削除して、コンポーネントでこのアクションをトリガーすることができます 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 
    } 
    } 
}) 

をvuex使用することですdata()から、今は計算されたプロパティでthis.$store.getters.tableDataを使用してデータを取得する：

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

簡単にデバッグのために、問題は、それがVUEインスタンスに含まれていないため、変数が反応しないですhttps://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en