Skip to content

Instantly share code, notes, and snippets.

@niallobrien
Last active May 14, 2020 21:05
Show Gist options
  • Save niallobrien/4f7b39bdd27f7f47a4dfa355864656ef to your computer and use it in GitHub Desktop.
Save niallobrien/4f7b39bdd27f7f47a4dfa355864656ef to your computer and use it in GitHub Desktop.
Simple Vue & Vuex fetch example using @feathersjs for realtime data.
// vuex/actions.js
import feathers from 'feathers/client'
import socketio from 'feathers-socketio/client'
import io from 'socket.io-client'
const socket = io('http://localhost:3030')
const app = feathers().configure(socketio(socket))
// Get the message service that uses a websocket connection
const messageService = app.service('messages')
export const fetchMessages = function ({dispatch}) {
// Call the messages service on the server via websocket
messageService.find({}).then(result => {
dispatch('FETCH_MESSAGES', result.data)
})
}
export const addMessage = function ({ dispatch }, text) {
messageService.create({ text }).then(result => {
dispatch('ADD_MESSAGE', result)
})
}
// App.js
<template>
<div id="app">
<Messages></Messages>
</div>
</template>
<script>
import Messages from './components/Messages'
import store from './vuex/store'
export default {
components: { Messages },
store // ES6 equivalent of store: store
}
</script>
// vuex/getters.js
export const getMessages = state => state.messages
// components/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>
</li>
</ul>
</div>
</template>
<script>
import { getMessages } from '../vuex/getters'
import { fetchMessages, addMessage } from '../vuex/actions'
export default {
data () {
return {
newMessage: ''
}
},
ready () {
this.fetchMessages()
},
methods: {
tryAddMessage () {
var text = this.newMessage
if (text.trim()) {
this.addMessage(text)
}
}
},
vuex: {
getters: {
messages: getMessages
},
actions: {
fetchMessages,
addMessage
}
}
}
</script>
// vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
messages: []
}
const mutations = {
FETCH_MESSAGES (state, messages) {
state.messages = messages
},
ADD_MESSAGE (state, message) {
state.messages.push(message)
}
}
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