{"id":19341652,"url":"https://github.com/logux/vuex","last_synced_at":"2025-04-23T03:31:54.756Z","repository":{"id":45291666,"uuid":"248029262","full_name":"logux/vuex","owner":"logux","description":"Vuex compatible API for Logux","archived":false,"fork":false,"pushed_at":"2024-07-18T14:34:25.000Z","size":2347,"stargazers_count":22,"open_issues_count":2,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-17T01:17:28.862Z","etag":null,"topics":["logux","vue","vuex","websocket"],"latest_commit_sha":null,"homepage":"https://logux.org/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/logux.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-17T17:15:21.000Z","updated_at":"2025-01-18T12:46:44.000Z","dependencies_parsed_at":"2023-11-12T00:26:39.415Z","dependency_job_id":"31c8f197-5e5d-4d69-bfdb-d038028aaf35","html_url":"https://github.com/logux/vuex","commit_stats":{"total_commits":475,"total_committers":8,"mean_commits":59.375,"dds":0.1010526315789474,"last_synced_commit":"dfba6834f9b18deee6ba9c74e6b96bbd206aceee"},"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logux%2Fvuex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logux%2Fvuex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logux%2Fvuex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logux%2Fvuex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logux","download_url":"https://codeload.github.com/logux/vuex/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250365727,"owners_count":21418736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["logux","vue","vuex","websocket"],"created_at":"2024-11-10T03:31:54.681Z","updated_at":"2025-04-23T03:31:54.273Z","avatar_url":"https://github.com/logux.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Logux Vuex\n\n\u003cimg align=\"right\" width=\"95\" height=\"148\" title=\"Logux logotype\"\n     src=\"https://logux.org/branding/logotype.svg\"\u003e\n\nLogux is a new way to connect client and server. Instead of sending\nHTTP requests (e.g., AJAX and GraphQL) it synchronizes log of operations\nbetween client, server, and other clients.\n\n* **[Guide, recipes, and API](https://logux.org/)**\n* **[Issues](https://github.com/logux/logux/issues)**\n  and **[roadmap](https://github.com/orgs/logux/projects/1)**\n* **[Projects](https://logux.org/guide/architecture/parts/)**\n  inside Logux ecosystem\n\nThis repository contains [Vuex] compatible API on top of the [Logux Client].\n\nThe current version is for Vue 3 and Vuex 4.\nFor Vue 2 support, we have [0.8 version from a separate branch](https://github.com/logux/vuex/tree/0.8).\n\n[Vuex]: https://vuex.vuejs.org\n[Logux Client]: https://github.com/logux/client\n\n## Install\n\n```sh\nnpm install @logux/core @logux/client @logux/vuex vuex@next\n```\nor\n```sh\nyarn add @logux/core @logux/client @logux/vuex vuex@next\n```\n\n## Usage\n\nSee [documentation] for Logux API.\n\n[documentation]: https://github.com/logux/docs\n\n```js\nimport { CrossTabClient } from '@logux/client'\nimport { createStoreCreator } from '@logux/vuex'\n\nconst client = new CrossTabClient({\n  server: process.env.NODE_ENV === 'development'\n    ? 'ws://localhost:31337'\n    : 'wss://logux.example.com',\n  subprotocol: '1.0.0',\n  userId: 'anonymous',\n  token: ''\n})\n\nconst createStore = createStoreCreator(client)\n\nconst store = createStore({\n  state: {},\n  mutations: {},\n  actions: {},\n  modules: {}\n})\n\nstore.client.start()\n\nexport default store\n```\n\n## Subscription\n\n### `useSubscription`\n\nComposable function that subscribes for channels during component initialization and unsubscribes on unmount.\n\n```html\n\u003ctemplate\u003e\n  \u003ch1 v-if=\"isSubscribing\"\u003eLoading\u003c/h1\u003e\n  \u003ch1 v-else\u003e{{ user.name }}\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { toRefs } from 'vue'\nimport { useStore, useSubscription } from '@logux/vuex'\n\nexport default {\n  props: ['userId'],\n  setup (props) {\n    let store = useStore()\n    let { userId } = toRefs(props)\n    let channels = computed(() =\u003e [`user/${userId.value}`])\n    let isSubscribing = useSubscription(channels)\n\n    let user = computed(() =\u003e store.state.users[userId.value])\n\n    return {\n      user,\n      isSubscribing\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n### `Subscribe`\n\nComponent-wrapper that subscribes for channels during component initialization and unsubscribes on unmount.\n\n```html\n\u003ctemplate\u003e\n  \u003csubscribe :channels=\"channels\" v-slot=\"{ isSubscribing }\"\u003e\n    \u003ch1 v-if=\"isSubscribing\"\u003eLoading\u003c/h1\u003e\n    \u003ch1 v-else\u003e{{ user.name }}\u003c/h1\u003e\n  \u003c/subscribe\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { toRefs, computed } from 'vue'\nimport { Subscribe, useStore } from '@logux/vuex'\n\nexport default {\n  components: { Subscribe },\n  props: ['userId'],\n  setup (props) {\n    let store = useStore()\n    let { userId } = toRefs(props)\n\n    let user = computed(() =\u003e store.state.users[userId.value])\n    let channels = computed(() =\u003e [`users/${userId.value}`])\n\n    return {\n      user,\n      channels\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## Using with Typescript\n\nPlace the following code in your project to allow this.$store to be typed correctly:\n\n```ts\n// shims-vuex.d.ts\n\nimport { LoguxVuexStore } from '@logux/vuex'\n\ndeclare module '@vue/runtime-core' {\n  // Declare your own store states.\n  interface State {\n    count: number\n  }\n\n  interface ComponentCustomProperties {\n    $store: LoguxVuexStore\u003cState\u003e\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogux%2Fvuex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogux%2Fvuex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogux%2Fvuex/lists"}