如何在Vuexfire中使用Moment.js

Question

我正在构建一个在store.js文件中使用Vuexfire的Vue.js应用程序。我的应用程序允许用户将用户输入的带有时间戳的帖子推送到Firestore中。我正在配置我的Vuexfire操作处理程序，以提交对按时间戳排序的firebase有效负载的突变，如下所示：

import Vue from "vue";
import Vuex from "vuex";
import firebase from "firebase";
import { vuexfireMutations, firestoreAction } from 'vuexfire'
import { db } from "@/main";
import moment from 'moment'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: []
  },
  mutations: {
    ...vuexfireMutations
  },
  actions: {
    setAllPost: firestoreAction(context => {
      return context.bindFirestoreRef('posts', db.collection('posts').orderBy('timestamp'))
    })
  }
});

此设置按时间戳按顺序正确排列帖子。但是，我希望使用Moment.js格式化时间戳，但不确定如何正确地将Moment应用于操作处理程序。我尝试将时间戳包装在Moment中，如下所示：

  actions: {
    setAllPost: firestoreAction(context => {
      return context.bindFirestoreRef('posts', 
      db.collection('posts').orderBy(moment('timestamp').format('lll')))
    })
  }

...but这不会返回任何输出，只会在控制台中返回警告。我还尝试设置了输入组件，以便推入Firebase的时间戳已经用Moment格式化，但帖子没有按正确的顺序返回。知道如何在Vuexfire操作处理程序中正确设置Moment.js来格式化时间戳吗？谢谢!

Answer 1

我找到了一个使用filters属性的解决方案：

<p>{{ post.timestamp | moment }}</p>


filters: {
  moment: function (date) {
    return moment(date).format('lll')
  }
},

这个可以正常工作。我仍然想知道是否有一种方法可以在Vuexfire操作处理程序中使用Moment.js。这有可能吗？

Answer 2

您不能在firestore中应用这种排序。orderBy()接受一个字符串，该字符串是要用作订单库的属性的名称或指向该属性的路径(TS类型fieldPath: string | firestore.FieldPath)。

https://firebase.google.com/docs/firestore/query-data/order-limit-data

要格式化日期，您必须像您所做的那样在客户端进行格式化，或者以您希望的格式保存日期，然后按其排序。