title: Firestore onSnapshot() method fires multiple times
body: <p>I have a vue-cli-4 app with multiple routes and vuex. Firestore database has been connected successfully - my app immediately reflects modifications applied to DB from Firestore console. </p>
  
  <p>Strange behavior begins to happen after leaving the route which contains component "synced" with Firestore and then returning back. In this case <strong>onSnapshot()</strong> method fires multiple times after modifying data in Firestore console.  </p>
  
  <p>I wonder whether I should somehow "manually" unsubscribe my component from Firestore each time after leaving the route - maybe on <strong>destroyed()</strong> hook.</p>
  
  <p>Code part: I'm syncing <em>PieChart.vue</em> component (located on /pie route) with Firestore by firing <strong>getDataPie</strong> action on <strong>created()</strong> hook.</p>
  
  <pre><code>&lt;script&gt;
  import { mapActions, mapGetters } from 'vuex'
  
  export default {
    name: 'PieChart',
  
   created () {
     this.getDataPie()
   },
  
   methods: {
     ...mapActions([
         ...
         'getDataPie',
         ...
      ])
    }
  }
  &lt;/script&gt;
  
  &lt;template&gt;
    ...
  &lt;/template&gt;
  </code></pre>
  
  <p>in vuex module:</p>
  
  <pre><code>import { getDataPie } from '../../helpers/helpersPie.js'
  
  ...
  
  actions: {
    ...
    getDataPie: async ({ commit, getters }) =&gt; {
      await getDataPie()
    },
    ...
  }
  </code></pre>
  
  <p><strong>getDataPie</strong> function, containing <em>console.log</em> which allows me to see how many times 
  <strong>onSnapshot()</strong> has been executed:</p>
  
  <pre><code>export function getDataPie () {
    // get data from firestore, onSnapshot - changes listener
    let fdata = []
    return db.collection('expenses').onSnapshot(res =&gt; {
      console.log('-------on snapshot--------------')
      res.docChanges().forEach(change =&gt; {
      const doc = { ...change.doc.data(), id: change.doc.id }
  
      // forming data array
      switch (change.type) {
        case 'added':
          fdata.push(doc)
          break
        case 'modified':
          const i = fdata.findIndex(i =&gt; i.id === doc.id)
          fdata[i] = doc
          break
        case 'removed':
          fdata = fdata.filter(i =&gt; i.id !== doc.id)
          break
        default:
          break
        }
      })
  
      store.commit('SET_RECIEVED_DATA_PIE', fdata)
      !store.getters.initPie &amp;&amp; store.commit('SET_INIT_PIE')
    })
  }
  </code></pre>
  
  <p>It looks like <strong>onSnapshot()</strong> fires as many times as route <strong>/pie</strong> was entered</p>