Skip to content

Instantly share code, notes, and snippets.

@niallobrien
Created April 11, 2016 20:18
Show Gist options
  • Save niallobrien/ef4ff9abceb85a8225bddd35ba15605d to your computer and use it in GitHub Desktop.
Save niallobrien/ef4ff9abceb85a8225bddd35ba15605d to your computer and use it in GitHub Desktop.
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)
}
// /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')
<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>
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
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment