Merge pull request #16 from Yoonit-Labs/feature/plugin-store

Feature/plugin store

README.md

@@ -1,6 +1,6 @@
 # Yoox
 
-## How to run the project
+## How to install
 ``
 npm install @yoonit/yoox-store-js
 ``
@@ -13,7 +13,7 @@ import yourStore from './yourstore'
 const myStore = Yoox.store(yourStore, { persist: true, onLoad: hideLoad })
 ```
 
-## store object
+## Store object
 It's only needed to create an object with keys: set, get, mix and state.
 <br>
 
@@ -160,3 +160,35 @@ It's only necessary to pass { persist: true } to the second parameter on store,
 
 - It's highly recommended to use onLoad method to guarantee that persisted data have been loaded to Yoox state. Ie: Show load until onLoad callback is called.
 
+## Vue Plugin
+
+If you are using Vue 2:
+
+````
+// main.js
+
+import { VueInstall } from '@yoonit/perse-sdk-js'
+import myStore from '../yoox'
+
+Vue.use(VueInstall, myStore)
+
+// Inside project
+
+this.$Yoox.set('userData', user)
+
+````
+
+If you are using Vue 3:
+
+````
+// main.js
+
+import { VueNextInstall } from '@yoonit/perse-sdk-js'
+import myStore from '../yoox'
+
+createApp(App).use(VueNextInstall, myStore)
+
+// Inside project. It's important to notice that there is no '$' on vue 3 global variable
+
+this.__Yoox.set('userData', user)
+````

src/main.js

@@ -1,5 +1,7 @@
 import { store } from './yoox'
+import { VueInstall } from "./plugins/vue"
+import { VueNextInstall } from './plugins/vue3'
 
-export default { store }
+export default { store, VueInstall, VueNextInstall }
 
-export { store }
+export { store, VueInstall, VueNextInstall }

src/plugins/vue.js

@@ -10,15 +10,6 @@ export const VueInstall = {
       }, // data
 
       methods: {
-        /**
-         * Returns the dispatch method
-         * @param payload
-         * @returns {*}
-         */
-        dispatch(payload) {
-          return this.localStore.dispatch(payload)
-        },
-
         /**
          * Returns the get method of a given get name
          * @param payload

src/plugins/vue3.js

@@ -0,0 +1,62 @@
+export const VueNextInstall = {
+  install: (app, storeInstance) => {
+    app.mixin({
+      data () {
+        return {
+          localState: {},
+          __Yoox: undefined
+        }
+      },
+      created () {
+        /**
+         * Observe to update yoox and state on changes
+         */
+        storeInstance.observe((state) => {
+          this.localState = { ...state }
+          this.__Yoox = { ...storeInstance }
+        })
+      },
+      computed: {
+        /**
+         * Returns local state with vue reactivity
+         * @returns {{}|*}
+         */
+        state () {
+          return this.localState
+        }
+      }, // computed
+      methods: {
+        /**
+         * Returns the get method of a given get name
+         * @param payload
+         * @returns {*}
+         */
+        get (payload) {
+          return this.__Yoox.get(payload)
+        },
+
+        /**
+         * Returns the mix method of a given name
+         * @param action
+         * @param payload
+         * @returns {*}
+         */
+        mix (action, payload) {
+          return this.__Yoox.mix(action, payload)
+        },
+
+        /**
+         * Update yoox according to action name and payload
+         * @param action
+         * @param payload
+         * @returns {*}
+         */
+        set (action, payload) {
+          return this.__Yoox.set(action, payload)
+        }
+      }
+    })
+  }
+}
+
+export default VueNextInstall