Add demo: Vuex Integration

.eslintrc

@@ -1,7 +1,8 @@
 {
   "extends": ["plugin:vue-libs/recommended", "plugin:jest/recommended"],
   "rules": {
-      "no-cond-assign": 0
+      "no-cond-assign": 0,
+      "eqeqeq": 0
   },
   "plugins": ["jest"]
 }

README.md

@@ -12,6 +12,8 @@ A Vue tree component that allows you to present hierarchically organized data in
 * multi selection
 * keyboard navigation
 * filtering
+* sorting
+* integration with Vuex
 
 ## Installation
 **Npm:**

demo/pages/vuex.html

@@ -65,6 +65,9 @@
 
           updateTree(state, newData) {
             state.tree = newData
+          },
+          tt(state, aaa) {
+            state.bb = aaa;
           }
         },
         actions: {
@@ -84,7 +87,7 @@
             store: {
               store: Store,
               key: 'tree',
-              mutations: []
+              mutations: ['initTree', 'updateTree']
             },
             checkbox: true
           }

docs/hexo/source/_data/nav.yml

@@ -48,6 +48,10 @@
       href: "#Inline-Editing"
       title: Inline Editing
 
+    - id: Integration with Vuex
+      href: "#Integration-with-Vuex"
+      title: Integration with Vuex
+
 
 - title: Examples
   href: "#Examples"

docs/hexo/source/index.md

@@ -397,6 +397,71 @@ There are two ways to set an async data:
 
 In progress...
 
+### Integration with Vuex
+
+The library is allow to pass `store` options. Example:
+
+```javascript
+  const Store = new Vuex.Store({
+    state: {
+      treeStore: []
+    },
+    mutations: {
+      // ---
+    },
+    actions: {
+      // ---
+    }
+  })
+
+  // -------
+
+  new Vue({
+    el: '#app',
+    store: Store,
+    data: () => ({
+      options: {
+        store: {
+          store: Store,
+          key: 'treeStore',
+          mutations: [] // this property is not required
+        },
+        checkbox: true
+      }
+    })
+  })
+
+```
+
+Every changes in store will redraw the tree. You can pass `mutations` to the options to check whether to update a tree. Ex:
+
+```javascript
+  const Store = new Vuex.Store({
+    state: {
+      treeStore: []
+    },
+    mutations: {
+      initTree(state, treeData) {
+        state.tree.push(...treeData)
+      },
+
+      updateTree(state, newData) {
+        state.tree = newData
+      }
+    }
+  })
+
+  // tree options:
+  {
+    store: {
+      store: Store,
+      key: 'treeStore',
+      mutations: ['initTree', 'updateTree]
+    }
+  }
+```
+
+
 
 ## Examples
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "liquor-tree",
   "description": "A Vue.js tree component.",
-  "version": "0.2.25",
+  "version": "0.2.26",
   "author": "Kostiantyn <phlyze@gmail.com>",
   "library": "LiquorTree",
   "scripts": {

src/lib/Tree.js

@@ -47,7 +47,7 @@ export default class Tree {
   }
 
   _sort (source, compareFn, deep) {
-    if (false !== deep) {
+    if (deep !== false) {
       this.recurseDown(source, node => {
         if (node.hasChildren()) {
           sort(node.children, compareFn)

src/mixins/TreeMixin.js

@@ -106,30 +106,33 @@ export default {
         return data
       }
 
+      const applyState = (state) => {
+        const data = state[key]
+
+        updateTree(
+          syncStates(data, this.model)
+        )
+      }
+
       // actions must be an array
       let { mutations } = store
 
       if (mutations && !mutations.length) {
         mutations = null
       }
 
+      updateTree(Store.state[key] || [])
 
       Store.subscribe((action, state) => {
         if (mutations && !mutations.includes(action.type)) {
           return
         }
 
-        const data = state[key]
-
-        updateTree(
-          syncStates(data, this.model)
-        )
+        applyState(state)
       })
-
-      updateTree(Store.state[key] || [])
     },
 
-    recurseDown(fn) {
+    recurseDown (fn) {
       this.tree.recurseDown(fn)
     },
 

src/utils/sort.js

@@ -1,42 +1,41 @@
 
-function orderAsc(node0, node1) {
+function orderAsc (node0, node1) {
   if (node0.text < node1.text) {
-    return -1;
+    return -1
   }
 
   if (node0.text > node1.text) {
-    return 1;
+    return 1
   }
 
-  return 0;
+  return 0
 }
 
-function orderDesc(node0, node1) {
+function orderDesc (node0, node1) {
   if (node0.text < node1.text) {
-    return 1;
+    return 1
   }
 
   if (node0.text > node1.text) {
-    return -1;
+    return -1
   }
 
-  return 0;
+  return 0
 }
 
-
-function getCompareFunction(order) {
-  switch(order.toLowerCase()) {
+function getCompareFunction (order) {
+  switch (order.toLowerCase()) {
     case 'asc': return orderAsc
     case 'desc': return orderDesc
   }
 }
 
 export default (source, compareFunction) => {
-  if (typeof compareFunction == 'string') {
+  if (typeof compareFunction === 'string') {
     compareFunction = getCompareFunction(compareFunction)
   }
 
-  if (Array.isArray(source) && typeof compareFunction == 'function') {
+  if (Array.isArray(source) && typeof compareFunction === 'function') {
     source.sort(compareFunction)
   }
 }