如何使组件数据等于全局对象答案

【问题标题】：How to make component(s) data equal to global object如何使组件数据等于全局对象
【发布时间】：2017-08-19 18:29:15
【问题描述】：

我希望我的组件共享一个全局数据，这是一个全局变量，在挂载我的主 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
   }
 }
}

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

【问题讨论】：

问题是变量不是响应式的，因为它不包含在 vue 实例中。 Vue 中全局变量的推荐方法是使用 Vuex。否则，您需要将 tableData 作为道具传递给所有组件。

标签： vue.js vuejs2

【解决方案1】：

最好的方法是使用 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
    }
  }
})

你可以通过this.$store.dispatch('getData', event_id)在组件中触发这个动作

从data() 中删除tableData，现在在计算属性中使用this.$store.getters.tableData 获取数据：

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

为了更容易调试安装https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

【讨论】：