diff --git a/docs/404.html b/docs/404.html index fbcf3ad..b4b59b2 100644 --- a/docs/404.html +++ b/docs/404.html @@ -16,13 +16,13 @@ - + -

404

Looks like we've got some broken links.
+ - + diff --git a/docs/JsProjects.html b/docs/JsProjects.html index 97b4325..bdb7e5a 100644 --- a/docs/JsProjects.html +++ b/docs/JsProjects.html @@ -16,7 +16,7 @@ - + @@ -41,6 +41,6 @@ →

- + diff --git a/docs/Ssr.html b/docs/Ssr.html index 342ec65..fb9f98e 100644 --- a/docs/Ssr.html +++ b/docs/Ssr.html @@ -16,7 +16,7 @@ - + @@ -37,6 +37,6 @@

- + diff --git a/docs/Tooling.html b/docs/Tooling.html index b6e0f87..718cb98 100644 --- a/docs/Tooling.html +++ b/docs/Tooling.html @@ -16,7 +16,7 @@ - + @@ -110,6 +110,6 @@ →

- + diff --git a/docs/Worker.html b/docs/Worker.html index 5a28954..9cee7df 100644 --- a/docs/Worker.html +++ b/docs/Worker.html @@ -16,7 +16,7 @@ - + @@ -32,7 +32,7 @@ ru-RU
  • en-US -

    • # Экшены из воркера

    Для "разгрузки" основного потока применяются воркеры (opens new window). В воркере можно проводить сложные вычисления, которые могли бы привести к просадкам в основном потоке. И затем необходимо передать результат вычислений в основной поток. Если вы используете vuex, то чаще всего вам будет необходимо результаты вычисления воркеров передать в хранилище.

    С Vuexok это сделать очень просто. Vuexok позволяет проксировать методы экшенов в воркеры.

    # Доработка инициализации воркера

    После инициализации воркера надо передать его в метод vuexokWorkerWrapper

    import { vuexokWorkerWrapper } from 'vuexok/dist/src/vuexokWorkerWrapper'
+

    # Экшены из воркера

    Для "разгрузки" основного потока применяются воркеры (opens new window). В воркере можно проводить сложные вычисления, которые могли бы привести к просадкам в основном потоке. И затем необходимо передать результат вычислений в основной поток. Если вы используете vuex, то чаще всего вам будет необходимо результаты вычисления воркеров передать в хранилище.

    С Vuexok это сделать очень просто. Vuexok позволяет проксировать методы экшенов в воркеры.

    # Доработка инициализации воркера

    После инициализации воркера надо передать его в метод vuexokWorkerWrapper

    import { vuexokWorkerWrapper } from 'vuexok/dist/src/vuexokWorkerWrapper'
 const worker = new Worker('./worker')
 vuexokWorkerWrapper(worker)

    При этом вы можете так же использовать comlink (opens new window) вместе с vuexok.

    # Доработка воркера

    Теперь перейдем к коду воркера. Что бы в воркере были доступны экшены модуля достаточно буквально 3 строки. @@ -42,7 +42,7 @@

    Простой пример (20 секунд)

    +

    # Обработка ошибок экшена

    Для взаимодействия воркера и основного потока используется метод postMessage (opens new window).

    postMessage использует алгоритм структурированного клонирования (opens new window), реализация которого в ff не поддерживает передачу нативных ошибок (opens new window). По этому вместо оригинального объекта ошибки vuexok передает в воркер поле message объекта Error (opens new window) и внутри воркера создается новый экземпляр ошибки new Error(message)

    ← →

    - + diff --git a/docs/assets/js/11.718cabd8.js b/docs/assets/js/11.718cabd8.js deleted file mode 100644 index a5852ec..0000000 --- a/docs/assets/js/11.718cabd8.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{364:function(t,s,e){"use strict";e.r(s);var r=e(42),a=Object(r.a)({},(function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"экшены-из-воркера"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#экшены-из-воркера"}},[t._v("#")]),t._v(" Экшены из воркера")]),t._v(" "),e("p",[t._v('Для "разгрузки" основного потока применяются '),e("a",{attrs:{href:"https://developer.mozilla.org/ru/docs/DOM/Using_web_workers",target:"_blank",rel:"noopener noreferrer"}},[t._v("воркеры"),e("OutboundLink")],1),t._v(". В воркере можно проводить сложные вычисления, которые могли бы привести к просадкам в основном потоке. И затем необходимо передать результат вычислений в основной поток. Если вы используете vuex, то чаще всего вам будет необходимо результаты вычисления воркеров передать в хранилище.")]),t._v(" "),e("p",[t._v("С Vuexok это сделать очень просто. Vuexok позволяет проксировать методы экшенов в воркеры.")]),t._v(" "),e("h2",{attrs:{id:"доработка-инициализации-воркера"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#доработка-инициализации-воркера"}},[t._v("#")]),t._v(" Доработка инициализации воркера")]),t._v(" "),e("p",[t._v("После инициализации воркера надо передать его в метод "),e("code",[t._v("vuexokWorkerWrapper")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" vuexokWorkerWrapper "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuexok/dist/src/vuexokWorkerWrapper'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" worker "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Worker")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./worker'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("vuexokWorkerWrapper")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("worker"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("p",[t._v("При этом вы можете так же использовать "),e("a",{attrs:{href:"https://github.com/GoogleChromeLabs/comlink",target:"_blank",rel:"noopener noreferrer"}},[t._v("comlink"),e("OutboundLink")],1),t._v(" вместе с vuexok.")]),t._v(" "),e("h2",{attrs:{id:"доработка-воркера"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#доработка-воркера"}},[t._v("#")]),t._v(" Доработка воркера")]),t._v(" "),e("p",[t._v("Теперь перейдем к коду воркера. Что бы в воркере были доступны экшены модуля достаточно буквально 3 строки.\nВ коде воркера импортируем метод "),e("code",[t._v("vuexokWorkerGetActions")]),t._v(", который нам вернет методы для вызова экшенов модуля.")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" vuexokWorkerGetActions "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuexok/dist/vuexokWorkerGetActions'")]),t._v("\n")])])]),e("p",[t._v("Воркер ничего не знает о нашем сторе и модулях, поэтому надо импортировать в воркер тип модуля.")]),t._v(" "),e("p",[t._v("Так как мы не хотим, чтобы в воркере был vuex и код нашего модуля, то импортируем только тип модуля. Typescript версии выше "),e("a",{attrs:{href:"https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/",target:"_blank",rel:"noopener noreferrer"}},[t._v("3.8"),e("OutboundLink")],1),t._v(" позволяет импортировать только тип.")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" type "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("countModule"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/modules/countModule'")]),t._v("\n")])])]),e("p",[t._v("Теперь мы можем получить доступ к экшенам нашего модуля из воркера. Метод "),e("code",[t._v("vuexokWorkerGetActions")]),t._v(" принимает один обязательный параметр - путь к модулю vuex.")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" countModuleActions "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vuexokWorkerGetActions"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" countModule"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'countModule'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("p",[t._v("Простой пример (20 секунд)\n"),e("video",{staticStyle:{width:"100% !important",height:"auto!important"},attrs:{width:"560",height:"240",controls:""}},[e("source",{attrs:{src:"/vuexok/video/createWorker.mp4",type:"video/mp4"}}),t._v("\nYour browser does not support the video tag.\n")])])])}),[],!1,null,null,null);s.default=a.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/11.c41e0d0a.js b/docs/assets/js/11.c41e0d0a.js new file mode 100644 index 0000000..95017c9 --- /dev/null +++ b/docs/assets/js/11.c41e0d0a.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{363:function(t,e,r){"use strict";r.r(e);var s=r(42),a=Object(s.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"экшены-из-воркера"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#экшены-из-воркера"}},[t._v("#")]),t._v(" Экшены из воркера")]),t._v(" "),r("p",[t._v('Для "разгрузки" основного потока применяются '),r("a",{attrs:{href:"https://developer.mozilla.org/ru/docs/DOM/Using_web_workers",target:"_blank",rel:"noopener noreferrer"}},[t._v("воркеры"),r("OutboundLink")],1),t._v(". В воркере можно проводить сложные вычисления, которые могли бы привести к просадкам в основном потоке. И затем необходимо передать результат вычислений в основной поток. Если вы используете vuex, то чаще всего вам будет необходимо результаты вычисления воркеров передать в хранилище.")]),t._v(" "),r("p",[t._v("С Vuexok это сделать очень просто. Vuexok позволяет проксировать методы экшенов в воркеры.")]),t._v(" "),r("h2",{attrs:{id:"доработка-инициализации-воркера"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#доработка-инициализации-воркера"}},[t._v("#")]),t._v(" Доработка инициализации воркера")]),t._v(" "),r("p",[t._v("После инициализации воркера надо передать его в метод "),r("code",[t._v("vuexokWorkerWrapper")])]),t._v(" "),r("div",{staticClass:"language-js extra-class"},[r("pre",{pre:!0,attrs:{class:"language-js"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" vuexokWorkerWrapper "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuexok/dist/src/vuexokWorkerWrapper'")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" worker "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Worker")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./worker'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("vuexokWorkerWrapper")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("worker"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),r("p",[t._v("При этом вы можете так же использовать "),r("a",{attrs:{href:"https://github.com/GoogleChromeLabs/comlink",target:"_blank",rel:"noopener noreferrer"}},[t._v("comlink"),r("OutboundLink")],1),t._v(" вместе с vuexok.")]),t._v(" "),r("h2",{attrs:{id:"доработка-воркера"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#доработка-воркера"}},[t._v("#")]),t._v(" Доработка воркера")]),t._v(" "),r("p",[t._v("Теперь перейдем к коду воркера. Что бы в воркере были доступны экшены модуля достаточно буквально 3 строки.\nВ коде воркера импортируем метод "),r("code",[t._v("vuexokWorkerGetActions")]),t._v(", который нам вернет методы для вызова экшенов модуля.")]),t._v(" "),r("div",{staticClass:"language-js extra-class"},[r("pre",{pre:!0,attrs:{class:"language-js"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" vuexokWorkerGetActions "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuexok/dist/vuexokWorkerGetActions'")]),t._v("\n")])])]),r("p",[t._v("Воркер ничего не знает о нашем сторе и модулях, поэтому надо импортировать в воркер тип модуля.")]),t._v(" "),r("p",[t._v("Так как мы не хотим, чтобы в воркере был vuex и код нашего модуля, то импортируем только тип модуля. Typescript версии выше "),r("a",{attrs:{href:"https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/",target:"_blank",rel:"noopener noreferrer"}},[t._v("3.8"),r("OutboundLink")],1),t._v(" позволяет импортировать только тип.")]),t._v(" "),r("div",{staticClass:"language-js extra-class"},[r("pre",{pre:!0,attrs:{class:"language-js"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" type "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("countModule"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/modules/countModule'")]),t._v("\n")])])]),r("p",[t._v("Теперь мы можем получить доступ к экшенам нашего модуля из воркера. Метод "),r("code",[t._v("vuexokWorkerGetActions")]),t._v(" принимает один обязательный параметр - путь к модулю vuex.")]),t._v(" "),r("div",{staticClass:"language-js extra-class"},[r("pre",{pre:!0,attrs:{class:"language-js"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" countModuleActions "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vuexokWorkerGetActions"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" countModule"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'countModule'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),r("p",[t._v("Простой пример (20 секунд)\n"),r("video",{staticStyle:{width:"100% !important",height:"auto!important"},attrs:{width:"560",height:"240",controls:""}},[r("source",{attrs:{src:"/vuexok/video/createWorker.mp4",type:"video/mp4"}}),t._v("\nYour browser does not support the video tag.\n")])]),t._v(" "),r("h2",{attrs:{id:"обработка-ошибок-экшена"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#обработка-ошибок-экшена"}},[t._v("#")]),t._v(" Обработка ошибок экшена")]),t._v(" "),r("p",[t._v("Для взаимодействия воркера и основного потока используется метод "),r("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage",target:"_blank",rel:"noopener noreferrer"}},[t._v("postMessage"),r("OutboundLink")],1),t._v(".")]),t._v(" "),r("p",[r("code",[t._v("postMessage")]),t._v(" использует "),r("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm",target:"_blank",rel:"noopener noreferrer"}},[t._v("алгоритм структурированного клонирования"),r("OutboundLink")],1),t._v(", реализация которого в ff не "),r("a",{attrs:{href:"https://bugzilla.mozilla.org/show_bug.cgi?id=1556604",target:"_blank",rel:"noopener noreferrer"}},[t._v("поддерживает передачу нативных ошибок"),r("OutboundLink")],1),t._v(". По этому вместо оригинального объекта ошибки vuexok передает в воркер поле "),r("code",[t._v("message")]),t._v(" объекта "),r("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error",target:"_blank",rel:"noopener noreferrer"}},[t._v("Error"),r("OutboundLink")],1),t._v(" и внутри воркера создается новый экземпляр ошибки "),r("code",[t._v("new Error(message)")])])])}),[],!1,null,null,null);e.default=a.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/12.66016e84.js b/docs/assets/js/12.f69430a6.js similarity index 98% rename from docs/assets/js/12.66016e84.js rename to docs/assets/js/12.f69430a6.js index 4d05fb0..e96ce17 100644 --- a/docs/assets/js/12.66016e84.js +++ b/docs/assets/js/12.f69430a6.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{363:function(t,s,a){"use strict";a.r(s);var n=a(42),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"vuexok"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vuexok"}},[t._v("#")]),t._v(" Vuexok")]),t._v(" "),a("p",[t._v("vuexok is a small package for large projects.")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://bundlephobia.com/result?p=vuexok",target:"_blank",rel:"noopener noreferrer"}},[a("img",{attrs:{src:"https://img.shields.io/bundlephobia/minzip/vuexok?color=%233eaf7c&style=for-the-badge&logo=appveyor",alt:"npm bundle size"}}),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),a("p",[t._v("Vuexok does not replace the vuex api but extends it. Adds support for typescript types and makes it possible to use actions and mutations without explicitly using "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/mutations.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("commit"),a("OutboundLink")],1),t._v(" and "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/actions.html#dispatching-actions",target:"_blank",rel:"noopener noreferrer"}},[t._v("dispatch"),a("OutboundLink")],1),t._v(", so migration in most cases will be quick and painless.")])]),t._v(" "),a("h2",{attrs:{id:"install"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#install"}},[t._v("#")]),t._v(" Install")]),t._v(" "),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm"}},[t._v("#")]),t._v(" NPM")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("npm install vuexok --save\n")])])]),a("h3",{attrs:{id:"yarn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yarn"}},[t._v("#")]),t._v(" Yarn")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("yarn add vuexok\n")])])]),a("h2",{attrs:{id:"what-vuexok-gives"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#what-vuexok-gives"}},[t._v("#")]),t._v(" What vuexok gives")]),t._v(" "),a("ul",[a("li",[t._v("No more constants needed for actions and mutations")]),t._v(" "),a("li",[t._v("More convenient work with watchers")]),t._v(" "),a("li",[t._v("Full support for typescript: tada:")]),t._v(" "),a("li",[t._v("Easy migration from vuex. You don't have to rewrite everything")]),t._v(" "),a("li",[t._v("Compatible with vuex 4 and vue 3: fire:")]),t._v(" "),a("li",[t._v("Small size vuexok")])]),t._v(" "),a("h2",{attrs:{id:"using"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#using"}},[t._v("#")]),t._v(" Using")]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),a("p",[t._v("Note that vuexok creates dynamic modules. All modules will be registered after the store has been created using the "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration",target:"_blank",rel:"noopener noreferrer"}},[t._v("store.registerModule"),a("OutboundLink")],1),t._v(" method")])]),t._v(" "),a("h3",{attrs:{id:"module-creation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#module-creation"}},[t._v("#")]),t._v(" Module creation")]),t._v(" "),a("p",[t._v("Notice how the plus mutation is called from the increment action")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createModule "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuexok'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" counterModule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createModule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'counterModule'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n actions"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n counterModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mutations"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("plus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mutations"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("plus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" payload\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setNumber")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" payload\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n getters"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("x2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"using-vuexok-module-in-vue-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#using-vuexok-module-in-vue-components"}},[t._v("#")]),t._v(" Using Vuexok Module in Vue Components")]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),a("p",[t._v("Vuexok internally uses vuex. The main purpose of creating vuexok was not to create a new api, but to extend the current vuex api. Therefore, when migrating, you will not need to rewrite the component code.")])]),t._v(" "),a("p",[t._v("The state property in a module is reactive, just like "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/state.html#getting-vuex-state-into-vue-components",target:"_blank",rel:"noopener noreferrer"}},[t._v("store.state"),a("OutboundLink")],1),t._v(", so to use the module state in Vue components you just need to return some of the module state in a "),a("a",{attrs:{href:"https://ru.vuejs.org/v2/guide/computed.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("computed property"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("div",{staticClass:"highlight-lines"},[a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" counterModule "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/modules/counterModule'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Counter "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Vue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n template"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("
    {{ count }}
    ")]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n computed"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("count")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" counterModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// type number")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"class-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#class-component"}},[t._v("#")]),t._v(" Class component")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" counterModule "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/modules/counterModule'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Component "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-class-component'")]),t._v("\n\n@"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Component")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n template"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    {{ count }}
    '")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyComponent")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("private")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("count")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" counterModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// type number")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h4",{attrs:{id:"calling-actions-and-mutations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#calling-actions-and-mutations"}},[t._v("#")]),t._v(" Calling actions and mutations")]),t._v(" "),a("h5",{attrs:{id:"actions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#actions"}},[t._v("#")]),t._v(" Actions")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" counterModule "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/modules/counterModule'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Similar to")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store.dispatch('counterModule/increment')")]),t._v("\n\ncounterModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("actions"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment called'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h5",{attrs:{id:"mutations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mutations"}},[t._v("#")]),t._v(" Mutations")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" counterModule "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/modules/counterModule'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Similar to")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store.commit('counterModule/setNumber', 10)")]),t._v("\n\ncounterModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mutations"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setNumber")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"watchers"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#watchers"}},[t._v("#")]),t._v(" Watchers")]),t._v(" "),a("p",[t._v("Module watchers work the same way as "),a("a",{attrs:{href:"https://vuex.vuejs.org/api/#watch",target:"_blank",rel:"noopener noreferrer"}},[t._v("store.watch"),a("OutboundLink")],1),t._v(". The only difference is that the state and getters of the module are passed as parameters of the getter function.")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" unwatch "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" jwtModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getters"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" getters"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("jwt"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("jwt"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("New token: ")]),a("span",{pre:!0,attrs:{class:"token interpolation"}},[a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("jwt"),a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" immediate"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{364:function(t,s,a){"use strict";a.r(s);var n=a(42),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"vuexok"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vuexok"}},[t._v("#")]),t._v(" Vuexok")]),t._v(" "),a("p",[t._v("vuexok is a small package for large projects.")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://bundlephobia.com/result?p=vuexok",target:"_blank",rel:"noopener noreferrer"}},[a("img",{attrs:{src:"https://img.shields.io/bundlephobia/minzip/vuexok?color=%233eaf7c&style=for-the-badge&logo=appveyor",alt:"npm bundle size"}}),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),a("p",[t._v("Vuexok does not replace the vuex api but extends it. Adds support for typescript types and makes it possible to use actions and mutations without explicitly using "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/mutations.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("commit"),a("OutboundLink")],1),t._v(" and "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/actions.html#dispatching-actions",target:"_blank",rel:"noopener noreferrer"}},[t._v("dispatch"),a("OutboundLink")],1),t._v(", so migration in most cases will be quick and painless.")])]),t._v(" "),a("h2",{attrs:{id:"install"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#install"}},[t._v("#")]),t._v(" Install")]),t._v(" "),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm"}},[t._v("#")]),t._v(" NPM")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("npm install vuexok --save\n")])])]),a("h3",{attrs:{id:"yarn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yarn"}},[t._v("#")]),t._v(" Yarn")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("yarn add vuexok\n")])])]),a("h2",{attrs:{id:"what-vuexok-gives"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#what-vuexok-gives"}},[t._v("#")]),t._v(" What vuexok gives")]),t._v(" "),a("ul",[a("li",[t._v("No more constants needed for actions and mutations")]),t._v(" "),a("li",[t._v("More convenient work with watchers")]),t._v(" "),a("li",[t._v("Full support for typescript: tada:")]),t._v(" "),a("li",[t._v("Easy migration from vuex. You don't have to rewrite everything")]),t._v(" "),a("li",[t._v("Compatible with vuex 4 and vue 3: fire:")]),t._v(" "),a("li",[t._v("Small size vuexok")])]),t._v(" "),a("h2",{attrs:{id:"using"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#using"}},[t._v("#")]),t._v(" Using")]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),a("p",[t._v("Note that vuexok creates dynamic modules. All modules will be registered after the store has been created using the "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration",target:"_blank",rel:"noopener noreferrer"}},[t._v("store.registerModule"),a("OutboundLink")],1),t._v(" method")])]),t._v(" "),a("h3",{attrs:{id:"module-creation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#module-creation"}},[t._v("#")]),t._v(" Module creation")]),t._v(" "),a("p",[t._v("Notice how the plus mutation is called from the increment action")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createModule "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuexok'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" counterModule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createModule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'counterModule'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n actions"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n counterModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mutations"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("plus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mutations"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("plus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" payload\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setNumber")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" payload\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n getters"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("x2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"using-vuexok-module-in-vue-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#using-vuexok-module-in-vue-components"}},[t._v("#")]),t._v(" Using Vuexok Module in Vue Components")]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),a("p",[t._v("Vuexok internally uses vuex. The main purpose of creating vuexok was not to create a new api, but to extend the current vuex api. Therefore, when migrating, you will not need to rewrite the component code.")])]),t._v(" "),a("p",[t._v("The state property in a module is reactive, just like "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/state.html#getting-vuex-state-into-vue-components",target:"_blank",rel:"noopener noreferrer"}},[t._v("store.state"),a("OutboundLink")],1),t._v(", so to use the module state in Vue components you just need to return some of the module state in a "),a("a",{attrs:{href:"https://ru.vuejs.org/v2/guide/computed.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("computed property"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("div",{staticClass:"highlight-lines"},[a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" counterModule "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/modules/counterModule'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Counter "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Vue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n template"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("
    {{ count }}
    ")]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n computed"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("count")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" counterModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// type number")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"class-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#class-component"}},[t._v("#")]),t._v(" Class component")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" counterModule "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/modules/counterModule'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Component "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-class-component'")]),t._v("\n\n@"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Component")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n template"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    {{ count }}
    '")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyComponent")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("private")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("count")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" counterModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// type number")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h4",{attrs:{id:"calling-actions-and-mutations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#calling-actions-and-mutations"}},[t._v("#")]),t._v(" Calling actions and mutations")]),t._v(" "),a("h5",{attrs:{id:"actions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#actions"}},[t._v("#")]),t._v(" Actions")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" counterModule "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/modules/counterModule'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Similar to")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store.dispatch('counterModule/increment')")]),t._v("\n\ncounterModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("actions"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment called'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h5",{attrs:{id:"mutations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mutations"}},[t._v("#")]),t._v(" Mutations")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" counterModule "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/modules/counterModule'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Similar to")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store.commit('counterModule/setNumber', 10)")]),t._v("\n\ncounterModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mutations"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setNumber")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"watchers"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#watchers"}},[t._v("#")]),t._v(" Watchers")]),t._v(" "),a("p",[t._v("Module watchers work the same way as "),a("a",{attrs:{href:"https://vuex.vuejs.org/api/#watch",target:"_blank",rel:"noopener noreferrer"}},[t._v("store.watch"),a("OutboundLink")],1),t._v(". The only difference is that the state and getters of the module are passed as parameters of the getter function.")]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" unwatch "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" jwtModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getters"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" getters"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("jwt"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("jwt"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("New token: ")]),a("span",{pre:!0,attrs:{class:"token interpolation"}},[a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("jwt"),a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" immediate"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("If you have a question or need support using Vuexok, please double-check your code and setup first. If you think you have found a bug or want to propose a feature, use the issues page.")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/app.d3b6740e.js b/docs/assets/js/app.ea3bee5c.js similarity index 94% rename from docs/assets/js/app.d3b6740e.js rename to docs/assets/js/app.ea3bee5c.js index 3546b84..7965819 100644 --- a/docs/assets/js/app.d3b6740e.js +++ b/docs/assets/js/app.ea3bee5c.js @@ -1,4 +1,4 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(t){function e(e){for(var r,a,c=e[0],u=e[1],s=e[2],l=0,p=[];l0?o(r(t),9007199254740991):0}},function(t,e){var n=Array.isArray;t.exports=n},function(t,e,n){var r=n(31),o=n(23);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(141),o="object"==typeof self&&self&&self.Object===Object&&self,i=r||o||Function("return this")();t.exports=i},function(t,e,n){var r=n(6),o=n(1),i=n(7),a=Object.defineProperty,c={},u=function(t){throw t};t.exports=function(t,e){if(i(c,t))return c[t];e||(e={});var n=[][t],s=!!i(e,"ACCESSORS")&&e.ACCESSORS,f=i(e,0)?e[0]:u,l=i(e,1)?e[1]:void 0;return c[t]=!!n&&!o((function(){if(s&&!r)return!0;var t={length:-1};s?a(t,1,{enumerable:!0,get:u}):t[1]=1,n.call(t,f,l)}))}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r=n(111),o=n(3),i=function(t){return"function"==typeof t?t:void 0};t.exports=function(t,e){return arguments.length<2?i(r[t])||i(o[t]):r[t]&&r[t][e]||o[t]&&o[t][e]}},function(t,e){t.exports=!1},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(String(t)+" is not a function");return t}},function(t,e,n){var r=n(221),o=n(224);t.exports=function(t,e){var n=o(t,e);return r(n)?n:void 0}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){"use strict";var r=n(0),o=n(29).filter,i=n(51),a=n(17),c=i("filter"),u=a("filter");r({target:"Array",proto:!0,forced:!c||!u},{filter:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(6),o=n(76),i=n(32),a=n(15),c=n(44),u=n(7),s=n(106),f=Object.getOwnPropertyDescriptor;e.f=r?f:function(t,e){if(t=a(t),e=c(e,!0),s)try{return f(t,e)}catch(t){}if(u(t,e))return i(!o.f.call(t,e),t[e])}},function(t,e){t.exports=function(t){return null!=t&&"object"==typeof t}},function(t,e,n){"use strict";var r=n(129).charAt,o=n(28),i=n(112),a=o.set,c=o.getterFor("String Iterator");i(String,"String",(function(t){a(this,{type:"String Iterator",string:String(t),index:0})}),(function(){var t,e=c(this),n=e.string,o=e.index;return o>=n.length?{value:void 0,done:!0}:(t=r(n,o),e.index+=t.length,{value:t,done:!1})}))},function(t,e,n){var r,o,i,a=n(181),c=n(3),u=n(4),s=n(11),f=n(7),l=n(48),p=n(34),h=c.WeakMap;if(a){var v=new h,d=v.get,y=v.has,m=v.set;r=function(t,e){return m.call(v,t,e),e},o=function(t){return d.call(v,t)||{}},i=function(t){return y.call(v,t)}}else{var g=l("state");p[g]=!0,r=function(t,e){return s(t,g,e),e},o=function(t){return f(t,g)?t[g]:{}},i=function(t){return f(t,g)}}t.exports={set:r,get:o,has:i,enforce:function(t){return i(t)?o(t):r(t,{})},getterFor:function(t){return function(e){var n;if(!u(e)||(n=o(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return n}}}},function(t,e,n){var r=n(50),o=n(31),i=n(12),a=n(13),c=n(128),u=[].push,s=function(t){var e=1==t,n=2==t,s=3==t,f=4==t,l=6==t,p=5==t||l;return function(h,v,d,y){for(var m,g,b=i(h),_=o(b),x=r(v,d,3),w=a(_.length),O=0,S=y||c,j=e?S(h,w):n?S(h,0):void 0;w>O;O++)if((p||O in _)&&(g=x(m=_[O],O,b),t))if(e)j[O]=g;else if(g)switch(t){case 3:return!0;case 5:return m;case 6:return O;case 2:u.call(j,m)}else if(f)return!1;return l?-1:s||f?f:j}};t.exports={forEach:s(0),map:s(1),filter:s(2),some:s(3),every:s(4),find:s(5),findIndex:s(6)}},function(t,e,n){var r=n(39),o=n(206),i=n(207),a=r?r.toStringTag:void 0;t.exports=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":a&&a in Object(t)?o(t):i(t)}},function(t,e,n){var r=n(1),o=n(18),i="".split;t.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(t){return"String"==o(t)?i.call(t,""):Object(t)}:Object},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var r,o=n(5),i=n(180),a=n(74),c=n(34),u=n(110),s=n(71),f=n(48),l=f("IE_PROTO"),p=function(){},h=function(t){return" +

    If you have a question or need support using Vuexok, please double-check your code and setup first. If you think you have found a bug or want to propose a feature, use the issues page.

    + diff --git a/docs/index.html b/docs/index.html index 14a6972..1cbb9b9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,7 +16,7 @@ - + @@ -39,6 +39,6 @@ →

    - + diff --git a/package.json b/package.json index 3db82f2..8a2a725 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vuexok", - "version": "0.0.8", + "version": "0.0.9", "description": "", "main": "dist/vuexok.js", "types": "dist/vuexok.d.ts", diff --git a/src/vuexokWorkerGetActions.ts b/src/vuexokWorkerGetActions.ts index c34d110..c215873 100644 --- a/src/vuexokWorkerGetActions.ts +++ b/src/vuexokWorkerGetActions.ts @@ -27,7 +27,7 @@ export const vuexokWorkerGetActions = < break; case 'vuexok:action:reject': removeListener() - reject(event.data.result) + reject(new Error(event.data.errorMessage)) break; } } diff --git a/src/vuexokWorkerWrapper.ts b/src/vuexokWorkerWrapper.ts index 64b16fe..1916418 100644 --- a/src/vuexokWorkerWrapper.ts +++ b/src/vuexokWorkerWrapper.ts @@ -2,27 +2,27 @@ import { modules } from './vuexok' import { ActionHandler } from './vuexok' export const vuexokWorkerWrapper = (worker:Worker) => { - const vuexokWorkerEventWrapper = async (event:MessageEvent) => { + const vuexokWorkerEventHandler = async (event:MessageEvent) => { if (event.data.type === 'vuexok:action') { const { path, action, payload, callbackId } = event.data try { const module = modules.get(path) - + if (!module) { - throw new Error() + throw new Error(`not found module ${path}`) } - + const moduleAction = module.actions[ action as keyof typeof module.actions ] as ActionHandler<(p:any) => any> if (!moduleAction) { - throw new Error() + throw new Error(`not found action ${action}`) } - + const result = await moduleAction(payload) - + worker.postMessage({ type: 'vuexok:action:resolve', result, @@ -31,12 +31,22 @@ export const vuexokWorkerWrapper = (worker:Worker) => { } catch (error) { worker.postMessage({ type: 'vuexok:action:reject', - error, + errorMessage: `[Vuexok/vuexokWorkerWrapper/${path}/${action}]: ${ + error.messgae ?? ( + typeof error === 'string' ? error : 'Unknow error;' + ) + }`, callbackId, }) } } } - worker.addEventListener('message', vuexokWorkerEventWrapper) + worker.addEventListener('message', vuexokWorkerEventHandler) + + const unbind = () => { + worker.removeEventListener('message', vuexokWorkerEventHandler) + } + + return unbind } diff --git a/vuepress/Worker.md b/vuepress/Worker.md index 2e9c7db..c8c2b00 100644 --- a/vuepress/Worker.md +++ b/vuepress/Worker.md @@ -34,3 +34,8 @@ const countModuleActions = vuexokWorkerGetActions('countModu Your browser does not support the video tag. + +## Обработка ошибок экшена +Для взаимодействия воркера и основного потока используется метод [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage). + +`postMessage` использует [алгоритм структурированного клонирования](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm), реализация которого в ff не [поддерживает передачу нативных ошибок](https://bugzilla.mozilla.org/show_bug.cgi?id=1556604). По этому вместо оригинального объекта ошибки vuexok передает в воркер поле `message` объекта [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) и внутри воркера создается новый экземпляр ошибки `new Error(message)` diff --git a/vuepress/en/README.md b/vuepress/en/README.md index 015e2fc..f7e1842 100644 --- a/vuepress/en/README.md +++ b/vuepress/en/README.md @@ -131,4 +131,8 @@ const unwatch = jwtModule.watch( (jwt) => console.log(`New token: ${jwt}`), { immediate: true }, ) -``` \ No newline at end of file +``` + + + +If you have a question or need support using Vuexok, please double-check your code and setup first. If you think you have found a bug or want to propose a feature, use the issues page. \ No newline at end of file