Updated to vuex 1.0.0-rc.2

Author: Akryum

.meteor/versions

@@ -14,7 +14,7 @@ akryum:vue-less@0.0.3
 akryum:vue-router@0.1.2
 akryum:vue-sass@0.0.1
 akryum:vue-stylus@0.0.1
-akryum:vuex@0.2.2
+akryum:vuex@0.3.0
 allow-deny@1.0.5
 apollo@0.0.3
 autoupdate@1.2.10

packages/vuex/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.3.0 - 2016/07/06
+
+ - Updated to vuex 1.0.0-rc.2 (some breaking changes may apply, see [release notes](https://github.com/vuejs/vuex/releases/tag/v1.0.0-rc))
+ - (BREAKING CHANGE) Store module property `root` has been renamed to `$root`.
+ - Submodules can now contain nested submodules.
+ - New module property `$parent`.
+
 ## 0.2.2 - 2016/07/01
 
  - Fixed a leak related to the tracker `watch()` option.

packages/vuex/README.md

@@ -473,6 +473,29 @@ export default {
 }
 ```
 
+### Nested submodules
+
+You can add nested submodules to your submodules with the same `addModule()` method as the root module:
+
+```javascript
+// Inside the 'forum' submodule
+// Add a nested submodule
+import thread from './thread';
+subModule.addModule(thread);
+```
+
+In your vue components, you can access the nested submodules by calling them on their parent module:
+
+```javascript
+export default {
+  vuex: ({forum}) => ({
+    trackers: {
+      selectedThread: forum.thread.trackers.getSelectedThread
+    }
+  })
+}
+```
+
 ### Meteor data integration
 
 To use meteor reactive data with your store, use *trackers* on your module with the `addTrackers(map)` method:
@@ -634,12 +657,12 @@ Example for the tracker we created above:
 export default {
   methods: {
     needTracker() {
-      // this.$store.root.<submodule>.trackers.<tracker_name>.addClient();
-      this.$store.root.forum.trackers.threads.addClient();
+      // this.$store.$root.<submodule>.trackers.<tracker_name>.addClient();
+      this.$store.$root.forum.trackers.threads.addClient();
     },
     noLongerNeedTracker() {
-      // this.$store.root.<submodule>.trackers.<tracker_name>.removeClient();
-      this.$store.root.forum.trackers.threads.removeClient();
+      // this.$store.$root.<submodule>.trackers.<tracker_name>.removeClient();
+      this.$store.$root.forum.trackers.threads.removeClient();
     }
   }
 }

packages/vuex/client/client.js

@@ -19,6 +19,7 @@ export class StoreSubModule {
     this._trackers = {};
     this._meteorData = {};
     this._trackerHandlers = {};
+    this._modules = {};
     this._vm = null;
     this._exported = false;
   }
@@ -48,8 +49,15 @@ export class StoreSubModule {
     _.merge(this._trackers, map);
   }
 
+  addModule(module) {
+    this._checkExported();
+    this[module.name] = this._modules[module.name] = module;
+    module.$parent = this;
+    module.$root = this.$root;
+  }
+
   getState(state) {
-    return state[this.name];
+    return this.$parent.getState(state)[this.name];
   }
 
   callMethod(...args) {
@@ -83,6 +91,23 @@ export class StoreSubModule {
     });
   }
 
+  _generateExportOptions() {
+    // Modules
+    let modules = {};
+    for (let m in this._modules) {
+      let module = this._modules[m];
+      modules[module.name] = module._generateExportOptions();
+    }
+
+    const options = {
+      state: this._state,
+      mutations: this._mutations,
+      modules
+    };
+
+    return options;
+  }
+
   _checkExported() {
     if(this._exported) {
       throw new Error(`The store has been exported, you can't change the modules anymore.`);
@@ -99,6 +124,10 @@ export class StoreSubModule {
     this._vm = new Vue({
       data: this._meteorData
     });
+
+    for (let m in this._modules) {
+      this._modules[m]._createTrackers();
+    }
   }
 
   _setStore(store) {
@@ -108,12 +137,20 @@ export class StoreSubModule {
     }
 
     this._exported = true;
+
+    for (let m in this._modules) {
+      this._modules[m]._setStore(store);
+    }
   }
 
   _processGetters() {
     for (let g in this._getters) {
       this.getters[g] = this._addGetter(this._getters[g]);
     }
+
+    for (let m in this._modules) {
+      this._modules[m]._processGetters();
+    }
   }
 
   _addGetter(getter) {
@@ -126,6 +163,10 @@ export class StoreSubModule {
     for (let g in this._actions) {
       this.actions[g] = this._addAction(this._actions[g]);
     }
+
+    for (let m in this._modules) {
+      this._modules[m]._processActions();
+    }
   }
 
   _addAction(action) {
@@ -146,82 +187,31 @@ export class StoreSubModule {
 export class StoreModule extends StoreSubModule {
   constructor() {
     super("root");
-    this._modules = {};
-    this.root = this;
+    this.$root = this;
   }
 
   getState(state) {
     return state;
   }
 
-  addModule(module) {
-    this._checkExported();
-    this[module.name] = this._modules[module.name] = module;
-    module.root = this;
-  }
-
   exportStore() {
-
+    // Process options
     this._processGetters();
     this._processActions();
-
     this._createTrackers();
 
-    // Modules
-    let modules = {};
-    for (let m in this._modules) {
-      let module = this._modules[m];
-      modules[module.name] = {
-        state: module._state,
-        mutations: module._mutations
-      }
-    }
-
-    let options = {
-      state: this._state,
-      mutations: this._mutations,
-      modules
-    };
-    let store = new ExtendedStore(this, options);
-
+    // Create native vuex store
+    let store = new ExtendedStore(this, this._generateExportOptions());
     this._setStore(store);
 
     return store;
   }
-
-  _createTrackers() {
-    super._createTrackers();
-    for (let m in this._modules) {
-      this._modules[m]._createTrackers();
-    }
-  }
-
-  _setStore(store) {
-    super._setStore(store);
-    for (let m in this._modules) {
-      this._modules[m]._setStore(store);
-    }
-  }
-
-  _processGetters() {
-    super._processGetters();
-    for (let m in this._modules) {
-      this._modules[m]._processGetters();
-    }
-  }
-
-  _processActions() {
-    super._processActions();
-    for (let m in this._modules) {
-      this._modules[m]._processActions();
-    }
-  }
 }
 
 class ExtendedStore extends Vuex.Store {
-  constructor(root, options) {
+  constructor($root, options) {
     super(options);
-    this.root = root;
+    this.$root = $root;
   }
 }
 
@@ -376,7 +366,7 @@ const PreVuexPlugin = {
         if (!store && options.parent && options.parent.$store) {
           store = options.parent.$store
         }
-        options.vuex = vuexCb(store.root);
+        options.vuex = vuexCb(store.$root);
       }
     }
   }

packages/vuex/npm.json

@@ -1,5 +1,5 @@
 {
   "devDependencies": {
-    "vuex": "^0.8.0"
+    "vuex": "^1.0.0-rc.2"
   }
 }

packages/vuex/package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'akryum:vuex',
-  version: '0.2.2',
+  version: '0.3.0',
   summary: 'State management with vuex for Meteor',
   git: 'https://github.com/Akryum/meteor-vue-component',
   documentation: 'README.md'