Vue.jsでページを移動するとリスト一覧が重複されてしまう(ライフサイクル)

Question

vue.js初心者です

vuexを使ってとfirebaseから一覧表示をしていますが、ページを移動した後に同じページに戻ると一覧表示の内容が2倍になっていしまいます。

<template>
<li v-for="(post, index) in posts" :key="index">
      <p>{{post.title}}</p>
      <p>{{post.age}}</p>
</li>
</template>

<script>
export default {
  computed: {
    posts() {
      return this.$store.state.posts
    }
  },
  created() {
    this.$store.dispatch('getAll')
  },
</script>

state: {
    posts: []
  },
mutations: {
    get(state, post) {
      state.posts.push(post)
    }
},
actions: {
    getAll({commit}) {
      db.collection('items').get().then(snapshot => {
        snapshot.forEach(doc => {
          const post = doc.data()
          post.id = doc.id
          commit('get', post)
        });
      })
    }
  },

一覧表示ページにアクセスした際にライフサイクルがもう一度行われてしまうからと予想し、actionsのなかで重複についての処理を下記を参考に試しましたが、書き方が悪いのかうまく処理できませんでした。

https://qiita.com/cocottejs/items/7afe6d5f27ee7c36c61f

どなたか知恵を貸していただきたいです。

よろしくおねがします。

vue 2.6.1

Answer 1

mutations: {
    get(state, post) {
      state.posts.push(post)
    }
},

pushだとどんどん追加されていくので普通に代入するように書けば解決しそうです↓

mutations: {
    get(state, post) {
      state.posts = post
    }
},

Comments

[tenlife]

参考にさせていただきました。ありがとうございます！

Answer 2

actionsの中で取得したものを配列の中に入れる。
mutationsには配列の状態で渡す。
このように実装するとうまくいきました。

     get(state, posts) {
       state.posts = posts
     },
    getAll({commit}) {
      db.collection('items').get().then(snapshot => {
        var tests = []
        snapshot.forEach(doc => {
          const post = doc.data()
          post.id = doc.id
          tests.push(post)
        });
        commit('get', tests)
      })
    },