2: 集合 | Meteor Vue 教程

Meteor 已经为你设置好了 MongoDB。为了使用我们的数据库，我们需要创建一个集合，我们将在其中存储我们的文档，在我们的例子中是我们的tasks。

你可以在这里阅读更多关于集合的信息这里。

在此步骤中，我们将实现所有必要的代码，以便为我们的任务建立一个基本的集合并使其运行。

2.1: 创建任务集合

我们可以通过在imports/api/TasksCollection.js创建一个新文件来创建一个新的集合来存储我们的任务，该文件实例化一个新的 Mongo 集合并将其导出。

imports/api/TasksCollection.js

import { Mongo } from 'meteor/mongo';
 
export const TasksCollection = new Mongo.Collection('tasks');

请注意，我们将文件存储在imports/api目录中，这是一个用于存储与 API 相关的代码（如发布和方法）的地方。你可以根据自己的需要命名此文件夹，这只是一个选择。

你可以删除此文件夹中的links.js文件，因为我们不会使用此集合。

你可以在这里阅读更多关于应用程序结构和导入/导出的信息这里。

2.2: 初始化任务集合

为了使我们的集合工作，你需要在服务器中导入它，以便它设置一些管道。

你可以使用import "/imports/api/TasksCollection"或import { TasksCollection } from "/imports/api/TasksCollection"（如果你打算在同一文件中使用），但请确保已导入它。

现在很容易检查我们的集合中是否有数据，否则我们也可以轻松地插入一些示例数据。

你不需要保留server/main.js的旧内容。

server/main.js

import { Meteor } from 'meteor/meteor';
import { TasksCollection } from '/imports/api/TasksCollection';

const insertTask = taskText => TasksCollection.insert({ text: taskText });
 
Meteor.startup(() => {
  if (TasksCollection.find().count() === 0) {
    [
      'First Task',
      'Second Task',
      'Third Task',
      'Fourth Task',
      'Fifth Task',
      'Sixth Task',
      'Seventh Task'
    ].forEach(insertTask)
  }
});

因此，你正在导入TasksCollection并在其上添加一些任务，遍历一个字符串数组，并对每个字符串调用一个函数，以将此字符串作为我们的text字段插入到我们的task文档中。

2.3: 渲染任务集合

现在到了有趣的部分，你将使用 Vue 的“数据容器”来将 Meteor 的反应式数据馈送到 Vue 的组件层次结构中来渲染任务。我们将为此使用vue-meteor-tracker包。

Meteor 使用 Meteor 包和 NPM 包，通常 Meteor 包使用 Meteor 内部或其他 Meteor 包。

此包已包含在 Vue 骨架中（meteor create --vue yourproject），因此你无需添加它。

现在你已准备好导入此包中的代码。

从 Meteor 包导入代码时，与 NPM 模块唯一的区别是，你需要在导入语句的 from 部分前面加上meteor/。

首先，我们需要将VueMeteorTracker添加到根 Vue 实例中

client/main.js

import VueMeteorTracker from 'vue-meteor-tracker';

Vue.use(VueMeteorTracker);

然后，我们需要修改App组件以从集合中获取任务：imports/ui/App.vue

<template>
  <div class="container">
    <header>
      <h1>Todo List</h1>
    </header>
    <ul>
      <Task
          v-for="task in tasks"
          v-bind:key="task._id"
          v-bind:task="task"
      />
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import Task from "./components/Task.vue";
import { TasksCollection } from "../api/TasksCollection";

export default {
  components: {
    Task
  },
  data() {
    return {};
  },
  methods: {},
  meteor: {
    tasks() {
      return TasksCollection.find({}).fetch();
    }
  }
};
</script>

Meteor 骨架默认情况下是安全的，但现在我们不想要这样，所以让我们添加autopublish包，以便我们可以更轻松地使用我们的数据进行原型设计