3

大家好，我有以下问题：我使用 vuexfire。当我从firestore绑定数据时，它会出现，并且在重新加载页面或访问另一个页面后，数据会消失。有谁知道这个问题以及如何解决它？

这是我的代码：

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// fontawesome
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret, faHome, faSignInAlt, faDumbbell, faUserGraduate, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
library.add(faUserSecret, faHome, faSignInAlt, faDumbbell, faUserGraduate, faInfoCircle)

const app = createApp(App)
app.component('fa-icon', FontAwesomeIcon)

app.config.productionTip = false
app.config.devtools = true

app.use(store).use(router).mount('#app')

存储/index.js

import { createStore } from 'vuex'
import { vuexfireMutations, firestoreAction } from 'vuexfire'
import { db } from '@/db' 

export default createStore({
  state: {
    todos: []
  },

  mutations: {
    ...vuexfireMutations,
  },

  actions: {
    bindTodosRef: firestoreAction(context => {
      return context.bindFirestoreRef('todos', db.collection('todos'))
    }),
},

  getters: {},
  modules: {},

})

主页.vue

<template>
  <div class="home">
    <h1>Home</h1>
    
    {{ todos }}
  
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import { db } from '@/db'

export default {
  name: 'Home',
  methods: {
    
  },

  computed: mapState(['todos']),
  
  created() {
    this.$store.dispatch('bindTodosRef', { ref: db.collection('todos') })
  },
}
</script>

多谢！

4

0 回答 0