标签: vuefire

我在路由器文件中删除了历史模式链接中的hashbang.现在,当我刷新页面时,我收到了404错误.

我试着按照这个链接

然后,我在firebase.json中添加了部分:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

然而一切都没有改变.

我不明白为什么我还有这个错误.我尝试了很多东西,但我找不到解决它的东西.

这是我的路由器文件:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/catalog'
    },
    {
      path: '/catalog',
      name: 'Catalog',
      component: Catalog
    },
    {
      path: '/catalog/category/:category',
      name: 'ProductsList',
      component: ProductsList
    },
    {
      path: '/catalog/category/:category/product/:id',
      name: 'ProductDetail',
      component: ProductDetail,
    },
    {
      path: '/catalog/category/:category/product/create',
      name: 'CreateProduct',
      component: CreateProduct
    }
  ]
});

我使用Firebase开发了一个基于Vue.js的小型网络应用程序来存储和同步数据.余存储items(例如,具有属性标题和字幕)和lists与属性listItems中,其中键阵列的(那些从火力地堡生成)items被存储.结构如下所示:

现在问题是:我想显示一个列表并显示listitems属性中的项目,我这样做:

Compontent:

var ShowList = Vue.extend({
    template: '#show-list',
    firebase: {
        // get all existing items from firebase
        items: firebase.database().ref('items')
    },
    data: function () {
        // get list item keys of list 'list_id' and bind it to this.list
        this.$bindAsObject('list', listsRef.child(this.$route.params.list_id));
        return {
            list: this.list
        };
    }
});

模板:

<!-- show a list -->
<template id="show-list">
    <ul v-if="list.items != ''">
        <li v-for="key in list.items">        <!-- I would …

我在 Vue JS 应用程序中使用 Firebase 的 Firestore：

"firebase": "^5.8.0",
"vue-firestore": "^0.3.16",

当我尝试获取具有引用另一个文档（Firestore 中的引用类型）的字段的文档时，出现以下错误：

[Vue warn]: Error in render: "TypeError: Converting circular structure to JSON"

每当我将文档中该字段的类型更改为字符串时，它似乎都可以正常工作。

我知道这是因为 Firestore JS SDK 中的某些内容试图将文档（以及文档附带的一堆元数据）序列化为 JSON，并且某处有循环引用？

在我的数据结构和字段中，我没有循环引用。它只是一个引用另一个文档的字段，并且被引用的文档不再引用任何其他文档。

我获取数据的代码是：

methods: {
      getContent() {
        const db = this.$firebase.firestore();
        db
          .collection('places')
          .doc(this.$route.params.placeKey)
          .orderBy('name')
          .get()
          .then(snap => {
            this.places = []

            snap.forEach(doc => {
              this.places.push(doc.data())
            })
          })
      }

所以我的问题是：

1）首先，我在代码中做错了什么吗？即使没有引发错误，Firestore 的 JS SDK 会为我解析参考吗？或者我是否必须调用参考并自己解决以获取参考文档的数据？2) 当您有可以参考的文档时，Firestore 的最佳做法是什么？你应该使用引用吗？什么时候？你什么时候会非规范化？

谢谢！

在我的 vuejs3 应用程序中，我的 main.js 中有这个简单的代码

import { createApp } from "vue";
import App from "./App.vue";
import { firestorePlugin } from "vuefire";

const app = createApp(App);

app.use(firestorePlugin);



app.mount("#app");

也许我没有app.use(firestorePlugin);正确使用。如果我不这样做，一切都会完美呈现，但这样我会收到此错误

vuefire.esm.js?0ff2:619 Uncaught TypeError: Cannot set property '$unbind' of undefined
    at firestorePlugin (vuefire.esm.js?0ff2:619)
    at Object.use (runtime-core.esm-bundler.js?5c40:2949)
    at eval (main.js?56d7:9)
    at Module../src/main.js (app.js:1021)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1034)
    at __webpack_require__ (app.js:849)
    at checkDeferredModules (app.js:46)
    at app.js:925

单击后，它会显示为Uncaught TypeError: Cannot set property '$unbind' of undefined

 Vue.prototype[unbindName] = function …

每个有关如何将Firebase与Vue一起使用的教程都说，在main.js文件中，我必须添加Vue.use（VueFire）;。这是有道理的。但是然后我只是得到了在“ vuefire”中找不到此消息导出“ default”（导入为“ VueFire”）的消息。

我尝试使用import *作为来自'vuefire'的VueFire，它不再提供错误消息，但似乎并未使用该插件。

这是main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import VueFire from 'vuefire'

Vue.config.productionTip = false

Vue.use(VueFire);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这里声明$fireStore可以在vuex action中访问：

async randomVuexAction({ commit, state, rootState }, userId) {
  const ref = this.$fireStore.collection('users').doc(userId)
  ...
}

问题：在 中触发操作后store/index.js：

addItem: ({ commit, getters }, itemName) => {
  const item = { name: itemName }
  this.$fireStore.collection('items').add(item).then((res) => {})
}

我收到错误：Cannot read property '$fireStore' of undefined。一般来说，console.log(this)除了nuxtServerInit()- 之外的所有操作中都会给出undefined。那么是否有可能使用$fireStore或者vuex文档具有误导性？

我有一个像这样的 firebase 配置文件：

import { firebase } from "@firebase/app";
import "@firebase/firestore";

const firebaseApp = firebase.initializeApp({
    apiKey: "myKey",
    authDomain: "myDomain",
    databaseURL: "myURL",
    projectId: "myProject",
    storageBucket: "myBucket",
    messagingSenderId: "999999999"
});

export const db = firebaseApp.firestore();
export const firebaseApp = firebaseApp;

我正在尝试对用户进行身份验证，但不断收到 firebaseApp.auth() 不是一个函数。

let me = db.collection('staff').where('email', '==', this.current_user.email)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
           this.fbUser = doc.id;
           let email = doc.data().email;
           let pw = doc.data().key;

           firebaseApp.auth().onAuthStateChanged(user => {
              if (user) {
                 //console.log('Already authenticated.');
              } else {
                 firebaseApp.auth().signInWithEmailAndPassword(email, pw)
                    .then(liu => …

我目前正在使用带有 Vuefire 支持的 Firestore/Vue.js。

Firestore DB 只有一个集合，其中有几个用户：

• 用户
  • 001
    • 姓名：杰克
    • uid：{Firebase 身份验证 ID}
    • 组织 ID：123
  • 002
    • 姓名：弗兰克
    • uid {Firebase 身份验证 ID}
    • 组织 ID：456

在 Vue 组件中，我尝试查询数据库以获取使用身份验证 ID 的第一个用户（当前存储在 Vuex 存储中）

<script>
import { db } from "../main.js";    
export default {
  data() {
    return {
      items: [] // to be used later
    };
  },
  created() {
    this.getServices();
  },
  methods: {
    getServices() {
      console.log(this.$store.state.user.uid);
      db.collection("users")
        //.doc("001")
        .where("uid", "==", this.$store.state.user.uid)
        .get()
        .then((snapshot) => {
          console.log(snapshot);
          if (snapshot != null && snapshot.data != null) …