update chat example for new API

Author: yyx990803

examples/chat/components/MessageSection.vue

@@ -8,26 +8,28 @@
         :message="message">
       </message>
     </ul>
-    <textarea class="message-composer" @keyup.enter="sendMessage"></textarea>
+    <textarea class="message-composer" @keyup.enter="trySendMessage"></textarea>
   </div>
 </template>
 
 <script>
-import store from '../store'
 import Message from './Message.vue'
+import { sendMessage } from '../store/actions'
 
 export default {
   components: { Message },
-  computed: {
-    thread () {
-      const id = store.state.currentThreadID
-      return id
-        ? store.state.threads[id]
-        : {}
+  vuex: {
+    state: {
+      thread ({ currentThreadID, threads }) {
+        return currentThreadID ? threads[currentThreadID] : {}
+      },
+      messages ({ messages }) {
+        const messageIds = this.thread.messages
+        return messageIds && messageIds.map(id => messages[id])
+      }
     },
-    messages () {
-      return this.thread.messages &&
-        this.thread.messages.map(id => store.state.messages[id])
+    actions: {
+      sendMessage
     }
   },
   watch: {
@@ -39,10 +41,10 @@ export default {
     }
   },
   methods: {
-    sendMessage (e) {
+    trySendMessage (e) {
       const text = e.target.value
       if (text.trim()) {
-        store.actions.sendMessage(text, this.thread)
+        this.sendMessage(text, this.thread)
         e.target.value = ''
       }
     }

examples/chat/components/Thread.vue

@@ -2,7 +2,7 @@
   <li
     class="thread-list-item"
     :class="{ active: isCurrentThread }"
-    @click="onClick">
+    @click="switchThread(thread.id)">
     <h5 class="thread-name">{{ thread.name }}</h5>
     <div class="thread-time">
       {{ thread.lastMessage.timestamp | time }}
@@ -14,18 +14,18 @@
 </template>
 
 <script>
-import store from '../store'
+import { switchThread } from '../store/actions'
 
 export default {
   props: ['thread'],
-  computed: {
-    isCurrentThread () {
-      return this.thread.id === store.state.currentThreadID
-    }
-  },
-  methods: {
-    onClick () {
-      store.actions.switchThread(this.thread.id)
+  vuex: {
+    state: {
+      isCurrentThread ({ currentThreadID }) {
+        return this.thread.id === currentThreadID
+      }
+    },
+    actions: {
+      switchThread
     }
   }
 }

examples/chat/components/ThreadSection.vue

@@ -21,12 +21,14 @@ import Thread from './Thread.vue'
 
 export default {
   components: { Thread },
+  vuex: {
+    state: {
+      threads: state => state.threads
+    }
+  },
   computed: {
-    threads () {
-      return store.state.threads
-    },
     unreadCount () {
-      const threads = store.state.threads
+      const threads = this.threads
       return Object.keys(threads).reduce((count, id) => {
         return threads[id].lastMessage.isRead
           ? count

examples/chat/main.js

@@ -2,14 +2,18 @@ import 'babel-polyfill'
 import Vue from 'vue'
 import App from './components/App.vue'
 import store from './store'
+import { getAllMessages } from './store/actions'
+
+Vue.config.debug = true
 
 Vue.filter('time', timestamp => {
   return new Date(timestamp).toLocaleTimeString()
 })
 
 new Vue({
   el: 'body',
+  store,
   components: { App }
 })
 
-store.actions.getAllMessages()
+getAllMessages(store)

examples/chat/store/index.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Vuex from '../../../src'
-import * as actions from './actions'
 import mutations from './mutations'
 
 Vue.use(Vuex)
@@ -32,7 +31,6 @@ export default new Vuex.Store({
       */
     }
   },
-  actions,
   mutations,
   middlewares: process.env.NODE_ENV !== 'production'
     ? [Vuex.createLogger()]