Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including logux-vuex with all npm packages installed. Try it out:

var loguxVuex = require("logux-vuex")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

logux-vuex v0.1.3

Vuex compatible API for Logux

Logux Vuex

Build Status

Logux is a client-server communication protocol. It synchronizes action between clients and server logs.

This library provides Vuex compatible API.

You may see the examples in the examples folder.

Install

npm i --save logux-vuex

Usage

Create Vuex store by createLoguxStore. It returns original Vuex store Vuex.Store function with Logux inside

import Vue from 'vue';
import Vuex from 'vuex';

+import createLoguxStore from 'logux-vuex/create-logux-store';

Vue.use(Vuex);

-const Store = Vuex.Store;
+const Store = createLoguxStore({
+  subprotocol: '1.0.0',
+  server: 'wss://localhost:1337',
+  userId: 10
+});

const store = new Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

+store.client.start()

See also basic usage example and Logux Status for UX best practices.

Commit

Instead of Vuex, in Logux Vuex you have 4 ways to commit action:

  • store.commit(action) is legacy API. Try to avoid it since you can’t specify how clean this actions.
  • store.commit.local(action, meta) — action will be visible only to current browser tab.
  • store.commit.crossTab(action, meta) — action will be visible to all browser tab.
  • store.commit.sync(action, meta) — action will be visible to server and all browser tabs.

In all 3 new commit methods you must to specify meta.reasons with array of “reasons”. It is code names of reasons, why this action should be still in the log.

store.commit.crossTab(
  { type: 'CHANGE_NAME', name }, { reasons: ['lastName'] }
)

When you don’t need some actions, you can remove reasons from them:

store.commit.crossTab(
  { type: 'CHANGE_NAME', name }, { reasons: ['lastName'] }
).then(meta => {
  store.log.removeReason('lastName', { maxAdded: meta.added - 1 })
})

Action with empty reasons will be removed from log.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free