edit chat example

examples/chat/components/App.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import vuex from '../vuex'
 import ThreadSection from './ThreadSection.vue'
 import MessageSection from './MessageSection.vue'
 
@@ -16,9 +15,6 @@ export default {
   components: {
     ThreadSection,
     MessageSection
-  },
-  created () {
-    vuex.actions.getAllMessages()
   }
 }
 </script>

examples/chat/components/MessageSection.vue

@@ -2,7 +2,11 @@
   <div class="message-section">
     <h3 class="message-thread-heading">{{ thread.name }}</h3>
     <ul class="message-list" v-el:list>
-      <message v-for="message in thread.messages" :message="message"></message>
+      <message
+        v-for="message in thread.messages"
+        track-by="id"
+        :message="message">
+      </message>
     </ul>
     <textarea class="message-composer" @keyup.enter="sendMessage"></textarea>
   </div>

examples/chat/components/ThreadSection.vue

@@ -6,7 +6,11 @@
       </span>
     </div>
     <ul class="thread-list">
-      <thread v-for="thread in threads" :thread="thread"></thread>
+      <thread
+        v-for="thread in threads"
+        track-by="id"
+        :thread="thread">
+      </thread>
     </ul>
   </div>
 </template>

examples/chat/main.js

@@ -1,6 +1,7 @@
 import 'babel-polyfill'
 import Vue from 'vue'
 import App from './components/App.vue'
+import vuex from './vuex'
 
 Vue.filter('time', timestamp => {
   return new Date(timestamp).toLocaleTimeString()
@@ -10,3 +11,5 @@ new Vue({
   el: 'body',
   components: { App }
 })
+
+vuex.actions.getAllMessages()

examples/chat/vuex/mutations.js

@@ -39,11 +39,9 @@ export default {
 }
 
 function addMessageToThread (thread, message, currentThreadID) {
-  if (!thread.messages.some(m => m.id === message.id)) {
-    // add a `isRead` field
-    message.isRead = message.threadID === currentThreadID
-    thread.messages.push(message)
-  }
+  // add a `isRead` field
+  message.isRead = message.threadID === currentThreadID
+  thread.messages.push(message)
 }
 
 function setCurrentThread (state, id) {