如何将 Firebase 添加到 Vue.js 树列表

Question

我正在尝试重新配置 Vue.js Workflowy 克隆以使用 Firebase 存储列表项。克隆基于以下存储库：https://github.com/9diov/myflowy。此 repo 允许将列表项组织到列表树中。列表项可以左右移动以确定它们与父列表项的关系。我成功实现了一个 addItem 函数，该函数将列表项及其级别添加到 Firebase。我现在正在尝试实现一种从数据库中检索项目并将它们返回到模板的方法。到目前为止，我能够设置一个beforeCreate() 生命周期挂钩来检索列表项值和级别并将它们推送到列表数组中。我添加了console.log(this.list) 以确认数据正在添加到数组中。但是，列表值及其级别不会呈现在屏幕上。我如何 beforeCreate() 挂钩将存储在 Firebase 中的 value 和 level 返回到树列表？

这是我的组件：

<template>
  <div id="app">
    <span>{{ msg }}</span>
    <ul>
      <li v-for="(item, index) in list"
          v-bind:class="item.level">
        <span>•</span>
        <input
          v-model="item.value"
          @keydown.down.prevent="moveDown"
          @keydown.up.prevent="moveUp"
          @keydown.tab.prevent="shiftRight(index, $event)"
          @keydown.shift.tab.prevent="shiftLeft(index, $event)"
          @keydown.enter.prevent="addItem(index)"
          v-focus="index === focused"
          @focus="focused = index"
          @blur="focused = null">
      </li>
    </ul>
  </div>
</template>

<script>
import { fblist } from './firebase'
import { focus } from 'vue-focus';
import Vue from 'vue';

const MAX_LEVEL = 10;

export default {
  name: 'app',
  directives: { focus: focus },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list: [
        { value: 'new item', level: 0 }
      ],
      focused: null
    }
  },
  async created () {
    let snapshot = await fblist.get()
    const list = []
    snapshot.forEach(doc => {
      let appData = doc.data()
      appData.id = doc.id
      // this.list.push(appData)
      this.list.push({ value: appData.value, level: appData.level })
      console.log(this.list)
    })
    this.list = list
  },
  methods: {
    moveDown: function() {
      this.focused = Math.min(this.focused + 1, this.list.length - 1);
    },
    moveUp: function () {
      this.focused = Math.max(this.focused - 1, 0);
    },
    shiftLeft: function (index, event) {
      let self = this;
      self.list[index].level = Math.max(self.list[index].level - 1, 0);
    },
    shiftRight: function (index, event) {
      if (event.shiftKey)
        return;
      if (index === 0) return;
      this.list[index].level = Math.min(this.list[index].level + 1, this.list[index - 1].level + 1, MAX_LEVEL);
    },
    async addItem (index) {
      this.list.splice(index + 1, 0, {value: '', level: this.list[index].level});
      this.focused = index + 1;
      await fblist.add({
        listItem: this.list
      })
      // this.getData()
    }
  }
}
</script>

created() 钩子

  async created () {
    let snapshot = await fblist.get()
    const list = []
    snapshot.forEach(doc => {
      let appData = doc.data()
      appData.id = doc.id
      this.list.push({ value: appData.value, level: appData.level })
      console.log(list)
    })
    this.list = list
  },

Answer 1

beforeCreate 钩子在您的组件初始化时运行：数据尚未反应，尚未设置事件。看看https://vuejs.org/v2/api/#beforeCreate 和https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram。

使用created 挂钩来获取Firestore 数据库（或任何其他API）是相当“标准的”。在这个钩子中，您将能够访问响应式数据。

所以修改一下

  async beforeCreate () {
     //.....
  }

到

  async created () {
     //.....
  }