feat: add initial support for vue devtools (#13)

* feat: add initial support for vue devtools

* chore: update dependencies

* chore: lint

* fix: nuxt issue with hydration

* chore: fix lint issue

README.md

@@ -101,6 +101,16 @@ our [Nuxt.js docs](./docs/nuxt.md#injecting-properties-into-the-store) for more
 > return `Promise.resolve()` instead. **Or**, you can also simply switch to
 > `async/await` syntax and it will work just fine.
 
+## Vue Devtools
+
+`vue-stator` also has vue devtools integration. You can pass `devtools: false` as store option if you want to disable this. By default the value of Vue.config.devtools is used (which is false in production)
+
+Due to differences between Vuex and vue-stator there are some remarks:
+
+- reverting to a previous state doesnt reset newly added keys after that state
+- getters are shown as an object tree of the modules you use
+
+
 ## Vuex-like helpers
 
 ```js

babel.config.js

@@ -3,12 +3,12 @@ module.exports = {
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-syntax-dynamic-import'
   ], */
-  'env': {
-    'test': {
-      'presets': [
-        [ '@babel/preset-env', {
-          'targets': {
-            'node': 'current'
+  env: {
+    test: {
+      presets: [
+        ['@babel/preset-env', {
+          targets: {
+            node: 'current'
           }
         }]
       ]

examples/spa/nuxt.config.js

@@ -7,7 +7,7 @@ export default {
   build: {
     transpile: ['vue-stator'],
     extend (config) {
-      config.resolve.alias['vue-stator'] = resolve(__dirname, '..', '..')
+      config.resolve.alias['vue-stator'] = resolve(__dirname, '..', '..', 'src')
     }
   }
 }

examples/spa/pages/about.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <nuxt-link to="/">Home</nuxt-link>
+
+    <p class="state">{{ $state.test }}</p>
+    <p class="getter">{{ $getters.userFullName }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    this.$state.test = Math.round(Math.random() * 100)
+  }
+}
+</script>

examples/spa/pages/index.vue

@@ -1,17 +1,20 @@
 <template>
   <div>
-    <p>{{ $state.test }}</p>
-    <p>{{ $getters.userFullName }}</p>
+    <nuxt-link to="/about">About</nuxt-link>
+
+    <p class="state">{{ $state.test }}</p>
+    <p class="getter">{{ $getters.userFullName }}</p>
   </div>
 </template>
 
 <script>
 export default {
   created () {
+    // Testing SSR state change
     this.$actions.user.update({
       firstName: 'Jonas',
-      lastName: 'Galvez',
+      lastName: 'Galvez'
     })
   }
 }
-</script>
+</script>

examples/spa/plugins/vue-stator.js

@@ -7,7 +7,7 @@ import * as user from '~/store/user'
 Vue.use(VueStator, {
   state,
   getters,
-  actions: { user }
+  modules: { user }
 })
 
 // Note: the `vue-stator/nuxt` module supports SPA mode.

examples/spa/store/user.js

@@ -1,3 +1,5 @@
-export function update (_, state, user) {
-  Object.assign(state, user)
+export const actions = {
+  update ({ state }, user) {
+    Object.assign(state, user)
+  }
 }

examples/ssr/nuxt.config.js

@@ -6,7 +6,7 @@ export default {
   build: {
     transpile: ['vue-stator'],
     extend (config) {
-      config.resolve.alias['vue-stator'] = resolve(__dirname, '..', '..')
+      config.resolve.alias['vue-stator'] = resolve(__dirname, '..', '..', 'src')
     }
   }
 }

examples/ssr/pages/about.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <nuxt-link to="/">Home</nuxt-link>
+
+    <p class="state">{{ $state.test }}</p>
+    <p class="getter">{{ $getters.userFullName }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    this.$state.test = Math.round(Math.random() * 100)
+  }
+}
+</script>

examples/ssr/pages/index.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
-    <p>{{ $state.test }}</p>
-    <p>{{ $getters.userFullName }}</p>
+    <nuxt-link to="/about">About</nuxt-link>
+
+    <p class="state">{{ $state.test }}</p>
+    <p class="getter">{{ $getters.userFullName }}</p>
   </div>
 </template>
 
 <script>
 export default {
-  fetch ({ $actions }) {
+  fetch ({ $actions, $state }) {
     // Testing SSR state change
     $actions.user.update({
       firstName: 'Jonas',

examples/ssr/store/user.js

@@ -1,3 +1,3 @@
-export function update (_, state, user) {
+export function update ({ state }, user) {
   Object.assign(state, user)
 }

nuxt/plugin.js

@@ -55,15 +55,7 @@ const willResolveStoreModules = storeModules.some(s => s.src.indexOf('index.') !
 if (willResolveStoreModules) { %>
 const VUEX_PROPERTIES = ['state', 'getters', 'actions']
 <% } %>
-let store = {
-  // vue-stator feature
-  hydrate: (initialState) => {
-    return process.client
-      ? <%= nuxtOptions.mode === 'spa' ? 'initialState' : 'window.__NUXT__.$state' %>
-      : initialState
-  }
-  // end vue-stator feature
-}
+let store = {}
 
 void (function updateModules () {
   <% storeModules.some(s => {
@@ -104,7 +96,12 @@ void (function updateModules () {
 // createStore
 export const createStore = store instanceof Function ? store : () => {
   return createStator(Object.assign({
-    strict: (process.env.NODE_ENV !== 'production')
+    strict: (process.env.NODE_ENV !== 'production'),
+    hydrate: (initialState) => {
+      return process.client
+        ? <%= nuxtOptions.mode === 'spa' ? 'initialState' : 'window.__NUXT__.$state' %>
+        : initialState
+    }
   }, store))
 }
 
@@ -201,7 +198,7 @@ function getStoreModule (storeModule, namespaces, { isProperty = false } = {}) {
 
   storeModule.modules[namespace] = storeModule.modules[namespace] || {}
   storeModule.modules[namespace].namespaced = true
-  storeModule.modules[namespace].modules = storeModule.modules[namespace].modules || {}
+  storeModule.modules[namespace].modules = storeModule.modules[namespace].modules || (namespaces.length ? {} : null)
 
   return getStoreModule(storeModule.modules[namespace], namespaces, { isProperty })
 }