https://github.com/logux/vuex

Vuex compatible API for Logux
https://github.com/logux/vuex

logux vue vuex websocket

Last synced: 5 days ago
JSON representation

Vuex compatible API for Logux

• Host: GitHub
• URL: https://github.com/logux/vuex
• Owner: logux
• License: mit
• Created: 2020-03-17T17:15:21.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-07-18T14:34:25.000Z (4 months ago)
• Last Synced: 2024-10-28T01:06:02.262Z (18 days ago)
• Topics: logux, vue, vuex, websocket
• Language: TypeScript
• Homepage: https://logux.org/
• Size: 2.24 MB
• Stars: 23
• Watchers: 5
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Logux Vuex



Logux is a new way to connect client and server. Instead of sending

HTTP requests (e.g., AJAX and GraphQL) it synchronizes log of operations

between client, server, and other clients.

* **[Guide, recipes, and API](https://logux.org/)**

* **[Issues](https://github.com/logux/logux/issues)**

  and **[roadmap](https://github.com/orgs/logux/projects/1)**

* **[Projects](https://logux.org/guide/architecture/parts/)**

  inside Logux ecosystem

This repository contains [Vuex] compatible API on top of the [Logux Client].

The current version is for Vue 3 and Vuex 4.

For Vue 2 support, we have [0.8 version from a separate branch](https://github.com/logux/vuex/tree/0.8).

[Vuex]: https://vuex.vuejs.org

[Logux Client]: https://github.com/logux/client

## Install

```sh

npm install @logux/core @logux/client @logux/vuex vuex@next

```

or

```sh

yarn add @logux/core @logux/client @logux/vuex vuex@next

```

## Usage

See [documentation] for Logux API.

[documentation]: https://github.com/logux/docs

```js

import { CrossTabClient } from '@logux/client'

import { createStoreCreator } from '@logux/vuex'

const client = new CrossTabClient({

  server: process.env.NODE_ENV === 'development'

    ? 'ws://localhost:31337'

    : 'wss://logux.example.com',

  subprotocol: '1.0.0',

  userId: 'anonymous',

  token: ''

})

const createStore = createStoreCreator(client)

const store = createStore({

  state: {},

  mutations: {},

  actions: {},

  modules: {}

})

store.client.start()

export default store

```

## Subscription

### `useSubscription`

Composable function that subscribes for channels during component initialization and unsubscribes on unmount.

```html

  
Loading

  
{{ user.name }}


import { toRefs } from 'vue'

import { useStore, useSubscription } from '@logux/vuex'

export default {

  props: ['userId'],

  setup (props) {

    let store = useStore()

    let { userId } = toRefs(props)

    let channels = computed(() => [`user/${userId.value}`])

    let isSubscribing = useSubscription(channels)

    let user = computed(() => store.state.users[userId.value])

    return {

      user,

      isSubscribing

    }

  }

})

```

### `Subscribe`

Component-wrapper that subscribes for channels during component initialization and unsubscribes on unmount.

```html

  

    
Loading

    
{{ user.name }}

  


import { toRefs, computed } from 'vue'

import { Subscribe, useStore } from '@logux/vuex'

export default {

  components: { Subscribe },

  props: ['userId'],

  setup (props) {

    let store = useStore()

    let { userId } = toRefs(props)

    let user = computed(() => store.state.users[userId.value])

    let channels = computed(() => [`users/${userId.value}`])

    return {

      user,

      channels

    }

  }

}

```

## Using with Typescript

Place the following code in your project to allow this.$store to be typed correctly:

```ts

// shims-vuex.d.ts

import { LoguxVuexStore } from '@logux/vuex'

declare module '@vue/runtime-core' {

  // Declare your own store states.

  interface State {

    count: number

  }

  interface ComponentCustomProperties {

    $store: LoguxVuexStore

  }

}

```