Vuex compatible API for Logux
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example/basic
test
.editorconfig
.gitignore
.jsdocrc
.npmignore
.travis.yml
.yaspellerrc
CHANGELOG.md
LICENSE
README.md
create-logux-store.js
index.js
package-lock.json
package.json

README.md

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.