Вызовы Vuex и API

Question

Я пытаюсь внедрить Vuex в приложение, которое я создаю, чтобы узнать больше о Vue.js. Идея довольно проста: получение пользовательской информации и списка элементов (все хранится в Firebase).

Я понял идею Vuex, но учебники, которые я могу найти, опираются только на данные, хранящиеся локально в store. Я не могу понять, как это будет работать, когда данные в store должны синхронизироваться с внешней базой данных.

Я что-то пропустил? или, может быть, Vuex не лучшее решение для этого?

Answer 1

Если вы хотите, чтобы «данные в хранилище (Vue.js) были синхронизированы с внешней базой данных (Firestore)», вы можете сделать это следующим образом, воспользовавшись onSnapshot()метод, который "присоединяет слушателя к QuerySnapshot событиям".

Давайте представим, что у вас есть коллекция cities в вашей базе данных Firestore, и у каждого документа этой коллекции есть поле name, в котором содержится название города.

Сначала объявите Firebaseconfig в файле firebaseConfig.js:

firebaseConfig.js

import firebase from 'firebase/app';
import 'firebase/firestore';

// firebase init goes here
const config = {
  apiKey: 'xxxxxxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxxx.firebaseapp.com',
  databaseURL: 'xxxxxxxxxxxxxxxxxx',
  projectId: 'xxxxxxxxxxxxxxxxxx'
};

firebase.initializeApp(config);
const db = firebase.firestore();

export { db };

Затем настройте хранилище Vuex следующим образом:

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cities: []
  },
  mutations: {
    SET_CITIES(state, val) {
      state.cities = val;
    }
  },
  actions: {
    //You may add here an action that would commit the SET_CITIES mutation
  }
});

Затем измените файл main.js следующим образом:

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
const fb = require('./firebaseConfig.js');

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  beforeCreate() {
    fb.db.collection('cities').onSnapshot(querySnapshot => {
      var c = [];
      querySnapshot.forEach(doc => {
        c.push({
          id: doc.id,
          name: doc.data().name
        });
      });
      store.commit('SET_CITIES', c);
    });
  },
  render: h => h(App)
}).$mount('#app');

У вас все настроено!Просто попробуйте получить массив городов в компоненте следующим образом:

HelloWorld.vue

<template>
  <div>
    <ul>
      <li v-for="c in cities" v-bind:key="c.id">{{ c.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  computed: {
    ...mapState(["cities"])
  }
};
</script>

и попробуйте добавить, удалить или изменить записи в базе данных.