Skip to content

logux/vuex

Repository files navigation

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.

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