diff --git a/doc/6/getting-started/vuejs/package.json b/doc/6/getting-started/vuejs/package.json index 79cc92744..fc865819f 100644 --- a/doc/6/getting-started/vuejs/package.json +++ b/doc/6/getting-started/vuejs/package.json @@ -7,6 +7,9 @@ "serve-without-vuex": "cd without-vuex && vue-cli-service serve", "build-without-vuex": "cd without-vuex && vue-cli-service build", "lint-without-vuex": "cd without-vuex && vue-cli-service lint", + "serve-with-vuex": "cd with-vuex && vue-cli-service serve", + "build-with-vuex": "cd with-vuex && vue-cli-service build", + "lint-with-vuex": "cd with-vuex && vue-cli-service lint", "test": "./node_modules/.bin/cypress run --record" }, "dependencies": { diff --git a/doc/6/getting-started/vuejs/with-vuex/babel.config.js b/doc/6/getting-started/vuejs/with-vuex/babel.config.js new file mode 100644 index 000000000..ba179669a --- /dev/null +++ b/doc/6/getting-started/vuejs/with-vuex/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/app' + ] +} diff --git a/doc/6/getting-started/vuejs/with-vuex/public/favicon.ico b/doc/6/getting-started/vuejs/with-vuex/public/favicon.ico new file mode 100644 index 000000000..df36fcfb7 Binary files /dev/null and b/doc/6/getting-started/vuejs/with-vuex/public/favicon.ico differ diff --git a/doc/6/getting-started/vuejs/with-vuex/public/index.html b/doc/6/getting-started/vuejs/with-vuex/public/index.html new file mode 100644 index 000000000..5ee139839 --- /dev/null +++ b/doc/6/getting-started/vuejs/with-vuex/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + kuzzle-vuejs-gs + + + +
+ + + diff --git a/doc/6/getting-started/vuejs/with-vuex/src/App.vue b/doc/6/getting-started/vuejs/with-vuex/src/App.vue new file mode 100644 index 000000000..6db0fc295 --- /dev/null +++ b/doc/6/getting-started/vuejs/with-vuex/src/App.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/doc/6/getting-started/vuejs/with-vuex/src/assets/logo.png b/doc/6/getting-started/vuejs/with-vuex/src/assets/logo.png new file mode 100644 index 000000000..f3d2503fc Binary files /dev/null and b/doc/6/getting-started/vuejs/with-vuex/src/assets/logo.png differ diff --git a/doc/6/getting-started/vuejs/with-vuex/src/main.js b/doc/6/getting-started/vuejs/with-vuex/src/main.js new file mode 100644 index 000000000..e8682e544 --- /dev/null +++ b/doc/6/getting-started/vuejs/with-vuex/src/main.js @@ -0,0 +1,9 @@ +import Vue from 'vue' +import App from './App.vue' +import store from './store.js' +Vue.config.productionTip = false + +new Vue({ + store, + render: h => h(App), +}).$mount('#app') diff --git a/doc/6/getting-started/vuejs/with-vuex/src/services/kuzzle.js b/doc/6/getting-started/vuejs/with-vuex/src/services/kuzzle.js new file mode 100644 index 000000000..06d4cdf11 --- /dev/null +++ b/doc/6/getting-started/vuejs/with-vuex/src/services/kuzzle.js @@ -0,0 +1,3 @@ +import { Kuzzle, WebSocket } from 'kuzzle-sdk'; + +export default new Kuzzle(new WebSocket('localhost')); \ No newline at end of file diff --git a/doc/6/getting-started/vuejs/with-vuex/src/store.js b/doc/6/getting-started/vuejs/with-vuex/src/store.js new file mode 100644 index 000000000..7ded8798b --- /dev/null +++ b/doc/6/getting-started/vuejs/with-vuex/src/store.js @@ -0,0 +1,71 @@ +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +export default new Vuex.Store({ + state: { + messages: [], + roomID: '', + nickname: '' + }, + actions: { + INIT: async ({ dispatch }, { kuzzle }) => { + await kuzzle.connect(); + if (!(await kuzzle.index.exists("chat"))) { + await kuzzle.index.create("chat"); + await kuzzle.collection.create("chat", "messages"); + } + dispatch('FETCH_MESSAGES', {kuzzle}); + }, + SEND_MESSAGE: async ({ state }, { kuzzle, message }) => { + await kuzzle.document.create("chat", "messages", { + value: message, + username: state.nickname + }); + }, + FETCH_MESSAGES: async ({ commit, dispatch }, { kuzzle }) => { + const results = await kuzzle.document.search( + "chat", + "messages", + { sort: ["_kuzzle_info.createdAt"] }, + { size: 100 } + ); + results.hits.map(hit => { + commit('ADD_MESSAGE', hit); + }); + dispatch('SUBSCRIBE_MESSAGES', {kuzzle}); + }, + SUBSCRIBE_MESSAGES: async ({ commit }, { kuzzle }) => { + const roomID = await kuzzle.realtime.subscribe("chat", "messages", {}, notification => { + if ( + notification.type === "document" && + notification.action === "create" + ) { + commit('ADD_MESSAGE', notification.result); + } + }); + commit('SET_ROOMID', roomID); + }, + UNSUBSCRIBE_MESSAGES: async ({ state }, { kuzzle }) => { + await kuzzle.realtime.unsubscribe(state.roomID); + } + }, + mutations: { + ADD_MESSAGE(state, hit) { + const message = { + _id: hit._id, + value: hit._source.value, + createdAt: hit._source._kuzzle_info.createdAt, + username: hit._source.username + }; + state.messages = [message, ...state.messages] + }, + SET_ROOMID(state, roomID) { + state.roomID = roomID; + }, + SET_NICKNAME(state, nickname) { + state.nicnkame = nickname; + } + } +}) diff --git a/doc/6/getting-started/vuejs/without-vuex/index.md b/doc/6/getting-started/vuejs/without-vuex/index.md index 2c8e991df..cd30a0ece 100644 --- a/doc/6/getting-started/vuejs/without-vuex/index.md +++ b/doc/6/getting-started/vuejs/without-vuex/index.md @@ -30,7 +30,7 @@ vue create kuzzle-playground Install the kuzzle-sdk: ```bash cd kuzzle-playground -yarn add kuzzle-sdk +npm install kuzzle-sdk ``` In the _App.vue_ file, you should remove the tag, the import and the component registration of the `HelloWorld` component, we won't use it.