vuex/examples/chat/components/Thread.vue

<template>
  <li
    class="thread-list-item"
    :class="{ active: isCurrentThread }"
    @click="onClick">
    <h5 class="thread-name">{{ thread.name }}</h5>
    <div class="thread-time">
      {{ thread.lastMessage.timestamp | time }}
    </div>
    <div class="thread-last-message">
      {{ thread.lastMessage.text }}
    </div>
  </li>
</template>

<script>
import store from '../store'

export default {
  props: ['thread'],
  computed: {
    isCurrentThread () {
      return this.thread.id === store.state.currentThreadID
    }
  },
  methods: {
    onClick () {
      store.actions.switchThread(this.thread.id)
    }
  }
}
</script>