Ajax Vue.js：如何传入非'；是否有父级/访问vue方法？

我正在开发一个简单的计时器应用程序。我从服务器上获得了3条数据：计时器、项目和用户。我相信我正确地循环了计时器，但我不确定是否应该以这种方式传递数据。我希望我的应用程序的不同部分对用户和项目使用相同的数据集，以防项目名称发生变化。以下是到目前为止嵌入问题的代码。我现在想一次调用所有数据

<script>
Vue.component('sidebar-timer', {
    props:  ['timer','projects','users'],
    computed: {

        /***** SHOULD PROJECT AND USER BE SET A DIFFERENT WAY? *****/
        project: function () {
            return this.projects[this.timer.project_id.toString()];
        },
        user: function () {
            return this.users[this.timer.user_id.toString()];
        }
    },

    template: '<li class="project-item"><div class="timer-proj-name"> @{{ project.name }}</div><div class="timer-name"> @{{ user.name }}</div> <button class="timer-start-btn">Start</button><div class="timer-duration">@{{ timer.duration }}</div><div class="timer-status">@{{ timer.status }}</div><div id="toggle-timer-notes"><div class="timer-task"> @{{ timer.notes }}</div><div>timer id: @{{ timer.id }}<input :value="timer.id"></li></div>',
})

var TimerSidebar = Vue.extend({
    methods: {
        updateData: function () { // GET DATA FROM THE SERVER
            var self = this;
            $.get('/timers/getJson', function(response){
                var userObj = response.users;
                var projectObj = response.projects;
                var timerObj = response.timers;
                var timerArr = Object.keys(timerObj).map(function (key) {return timerObj[key]; });

/***** IS THERE A WAY TO SET projects AND users AT A LEVEL OUTSIDE OF TimerSidebar? *****/
                self.$set(self, 'users', userObj);
                self.$set(self, 'projects', projectObj);
                self.$set(self, 'timers', timerArr);
            })
        }
    }
})
var timerSidebar = new TimerSidebar({
    el: '#timer-sidebar',
    data: {
           timers: [],
           projects: [],
           users: []
    },
})
methods: {

/***** HOW TO ONCLICK CALL updateTimers FROM OUTSIDE THE COMPONENT? *****/
        updateTimers: function(){ // ADD TIME RECORD FROM CLICK EVENT
            var newTimers = this.timers;
            newTimers.push({id: 166, project_id: 123, user_id: 1});
            newTimers.sort(function(timer1, timer2){
               if(timer1.id > timer2.id){
                   return 1;
               } else if(timer1.id < timer2.id){
                   return -1;
               } else {
                   return 0;
               }
            });
            this.timers = newTimers;
        }
    }

Vue.component（'sidebar-timer'{
道具：['timer'、'projects'、'users']，
计算：{
/*****是否应以不同的方式设置项目和用户*****/
项目：职能（）{
返回this.projects[this.timer.project_id.toString（）]；
},
用户：函数（）{
返回this.users[this.timer.user_id.toString（）]；
}
},
模板：“
{{project.name}}}{{user.name}}开始{{timer.duration}}}}}{{timer.status}}}}}{{{timer.notes}计时器id:{{timer.id}
”，
})
var TimerSidebar=Vue.extend({
方法：{
updateData:function（）{//从服务器获取数据
var self=这个；
$.get（'/timers/getJson'，函数（响应）{
var userObj=response.users；
var projectObj=response.projects；
var timerObj=响应时间；
var timerArr=Object.keys（timerObj.map）（函数（key）{return timerObj[key]；}）；
/*****有没有办法将项目和用户设置在TimerSidebar之外的级别*****/
self.$set（self，'users'，userObj）；
self.$set（self，'projects'，projectObj）；
self.$set（self，'timers'，timerArr）；
})
}
}
})
var timerSidebar=新timerSidebar({
el:“#计时器边栏”，
数据：{
计时器：[]，
项目：[]，
用户：[]
},
})
方法：{
/*****如何从组件外部单击调用更新程序*****/
updateTimers:function（）{//从单击事件添加时间记录
var newTimers=this.timers；
push（{id:166，项目id:123，用户id:1}）；
排序（函数（计时器1、计时器2）{
如果（timer1.id>timer2.id）{
返回1；
}else if（timer1.id

---

这是你应该去看医生的标准情况。由于您有将由多个组件使用的数据，如果数据流仅限于一种方式：父级到子级，那么它是可以管理的，但是一旦您得到在子级更改时更新父级数据的要求，或者更糟的是，在另一个同级更改时更新同级数据的要求，它就会变得混乱

Vue提供了自己的功能，但一般的做法是使用它。通过这种方式，您可以将所有项目/用户等存储在vuex中，并且每个组件都可以从中央状态存储。如果一个组件更改了其版本，则所有组件都可以响应地使用更新的版本。您可以使用vuex本身在一个位置启动数据

以下是架构图：

您可以看看我对类似问题的回答，并看看如何调用api和在存储中保存数据的示例