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
• Issues and roadmap
• Projects 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.

Install

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

or

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

Usage

See documentation for Logux API.

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.

<template>
  <h1 v-if="isSubscribing">Loading</h1>
  <h1 v-else>{{ user.name }}</h1>
</template>

<script>
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
    }
  }
})
</script>

Subscribe

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

<template>
  <subscribe :channels="channels" v-slot="{ isSubscribing }">
    <h1 v-if="isSubscribing">Loading</h1>
    <h1 v-else>{{ user.name }}</h1>
  </subscribe>
</template>

<script>
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
    }
  }
}
</script>

Using with Typescript

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

// 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<State>
  }
}