我正在开发一个简单的计时器应用程序。我从服务器获取 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;
}
}
最佳答案
这是标准情况,您应该选择 centralised state management 。由于您的数据将被多个组件使用,如果数据流仅限于一种方式:父级到子级,它是可以管理的,但是一旦您需要在子级更改时更新父级数据或者更糟糕的是,当另一个同级更改它时更新同级数据,它会变得困惑。
Vue 提供了自己的 Flux like implementation ,但一般做法是使用 vuex 。这样,您就可以将所有项目/用户等存储在 vuex state 中,每个组件可以 read/update来自中央国家。如果一个组件更改了它,则更新的版本可 react 性地供所有组件使用。您可以使用actions在一处启动数据。在 vuex 本身中。
架构图如下:
你可以看看我的回答here关于类似的问题,请查看有关如何调用 api 并将数据保存在存储中的示例。
关于ajax - Vue.js:如何传入不是父/访问 vue 方法的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40940820/