actions.js

export const fetchMessages = function ({dispatch}, messages) {
  dispatch('FETCH_MESSAGES', messages)
}

export const addMessage = function ({dispatch}, message) {
  dispatch('ADD_MESSAGE', message)
}

export const removeMessage = function ({dispatch}, message) {
  dispatch('REMOVE_MESSAGE', message)
}

index.js

// /services/index.js
import feathers from 'feathers/client'
import socketio from 'feathers-socketio/client'
import io from 'socket.io-client'

const socket = io('http://localhost:3030')

export const app = feathers().configure(socketio(socket))
// repeat this line for every service in our backend
export const messageService = app.service('messages')

Messages.vue

<template>
  <div>
    <input type="text" placeholder="Enter message" v-model="newMessage">
    <button type="submit" @click="tryAddMessage">Add message</button>
    <ul>
      <li v-for="message in messages">
        <span>{{ message.text }}</span>
        <span @click="tryRemoveMessage(message)">x</span>
      </li>
    </ul>
  </div>
</template>

<script>
  import * as services from '../services'
  import { getMessages } from '../vuex/getters'
  import { fetchMessages, addMessage, removeMessage } from '../vuex/actions'

  export default {
    data () {
      return {
        newMessage: ''
      }
    },

    ready () {
      // Call the messages service on the server via websocket
      services.messageService.find({}).then(result => this.fetchMessages(result.data))

      // When a new message is created, call an action which will dispatch the mutation.
      services.messageService.on('created', message => this.addMessage(message))

      // When a message is removed, call an action which will dispatch the mutation.
      services.messageService.on('removed', message => this.removeMessage(message))
    },

    methods: {
      tryAddMessage () {
        if (this.newMessage.trim()) {
          // Persist a new message to the db
          services.messageService.create({text: this.newMessage})
          // Clear input field
          this.newMessage = ''
        }
      },
      tryRemoveMessage (message) {
        // Remove message from the db
        services.messageService.remove(message)
      }
    },
    vuex: {
      getters: {
        messages: getMessages
      },
      actions: {
        fetchMessages,
        addMessage,
        removeMessage
      }
    }
  }
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import _ from 'lodash'

Vue.use(Vuex)

const state = {
  messages: []
}

const mutations = {
  FETCH_MESSAGES (state, messages) {
    state.messages = messages
  },

  ADD_MESSAGE (state, message) {
    state.messages.push(message)
  },

  REMOVE_MESSAGE (state, message) {
    // find the index of the obj to remove from array
    let index = _.findIndex(state.messages, { _id: message._id })
    // remove the obj at position [index] from array
    state.messages.$remove(state.messages[index])
    console.log(state.messages)
  }
}

export default new Vuex.Store({
  state,
  mutations
})