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')))
    })
  }

...但是没有返回任何输出，只是控制台中的警告。我还尝试设置输入组件，以使推送到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

要格式化日期，必须像在客户端一样在客户端进行，或者以所需的格式保存日期，然后按日期排序。

如何在Vuexfire中使用Moment.js

2 个答案: