|
5 | 5 | </p>
|
6 | 6 |
|
7 | 7 | <p align="center">
|
8 |
| - <a href="https://www.npmjs.com/package/vue-socket.io"><img src="https://img.shields.io/npm/v/vue-socket.io.svg?style=flat-square"/> <img src="https://img.shields.io/npm/dt/vue-socket.io.svg?style=flat-square"/></a> |
9 |
| - <a href="https://github.com/vuejs/awesome-vue"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg?style=flat-square"/></a> |
10 |
| - <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-2.x-brightgreen.svg?style=flat-square"/></a> |
11 |
| - <a href="http://packagequality.com/#?package=vue-socket.io"><img src="http://npm.packagequality.com/shield/vue-socket.io.svg?style=flat-square"/></a> |
12 |
| - <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/npm/l/vue-socket.io.svg?style=flat-square"/></a> |
13 |
| - <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg?style=flat-square"/></a> |
| 8 | + <a href="https://www.npmjs.com/package/vue-socket.io"><img src="https://img.shields.io/npm/v/vue-socket.io.svg"/> <img src="https://img.shields.io/npm/dt/vue-socket.io.svg"/></a> |
| 9 | + <a href="https://github.com/vuejs/awesome-vue"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"/></a> |
| 10 | + <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-2.x-brightgreen.svg"/></a> |
| 11 | + <a href="http://packagequality.com/#?package=vue-socket.io"><img src="http://npm.packagequality.com/shield/vue-socket.io.svg"/></a> |
| 12 | + <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/npm/l/vue-socket.io.svg"/></a> |
| 13 | + <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg"/></a> |
14 | 14 | </p>
|
15 | 15 |
|
16 | 16 | <p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements<p>
|
@@ -88,4 +88,28 @@ this.sockets.subscribe('EVENT_NAME', (data) => {
|
88 | 88 | });
|
89 | 89 |
|
90 | 90 | this.sockets.unsubscribe('EVENT_NAME');
|
91 |
| -``` |
| 91 | +``` |
| 92 | + |
| 93 | +#### 🏆 Vuex Integration |
| 94 | +<p>When you set store parameter in installation, `Vue-Socket.io` will sending events to Vuex store, you can use `actions` and `mutations` in same time if you set both prefix for vuex but best way is use just `actions`</p> |
| 95 | + |
| 96 | +``` javascript |
| 97 | +import Vue from 'vue' |
| 98 | +import Vuex from 'vuex' |
| 99 | + |
| 100 | +Vue.use(Vuex) |
| 101 | + |
| 102 | +export default new Vuex.Store({ |
| 103 | + state: {}, |
| 104 | + mutations: { |
| 105 | + "<MUTATION_PREFIX><EVENT_NAME>"() { |
| 106 | + // do something |
| 107 | + } |
| 108 | + }, |
| 109 | + actions: { |
| 110 | + "<ACTION_PREFIX><EVENT_NAME>"() { |
| 111 | + // do something |
| 112 | + } |
| 113 | + } |
| 114 | +}) |
| 115 | +``` |
0 commit comments