better vuex store

examples/vuex-store/pages/index.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
     <p>
-      <button @click="increment">{{ counter }}</button><br>
+      <button @click="increment">{{ counter }}</button>
+      <br>
       <nuxt-link to="/about">About</nuxt-link>
+      <br>
+      <nuxt-link to="/todos">Todos</nuxt-link>
     </p>
   </div>
 </template>

examples/vuex-store/pages/todos.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h2>Todos</h2>
+    <input placeholder="What needs to be done?" @keyup.enter="addTodo">
+    <ul>
+      <li v-for="todo in todos">
+        <input type="checkbox" :checked="todo.done" @change="toggle({ todo })">
+        <label v-text="todo.text" @dblclick="editing = true"></label>
+      </li>
+    </ul>
+    <nuxt-link to="/">Home</nuxt-link>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+
+export default {
+  computed: {
+    todos () { return this.$store.state.todos.list }
+  },
+  methods: {
+    addTodo (e) {
+      var text = e.target.value
+      if (text.trim()) {
+        this.$store.commit('todos/add', { text })
+      }
+      e.target.value = ''
+    },
+    ...mapMutations({
+      toggle: 'todos/toggle'
+    })
+  }
+}
+</script>
+
+<style>
+li {
+  list-style: none;
+}
+</style>

examples/vuex-store/store/index.js

@@ -1,17 +1,7 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+export const state = { counter: 0 }
 
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
-  state: {
-    counter: 0
-  },
-  mutations: {
+export const mutations = {
   increment (state) {
     state.counter++
   }
-  }
-})
-
-export default store
+}

examples/vuex-store/store/todos.js

@@ -0,0 +1,20 @@
+export const state = {
+  list: []
+}
+
+export const mutations = {
+  add (state, { text }) {
+    state.list.push({
+      text,
+      done: false
+    })
+  },
+
+  delete (state, { todo }) {
+    state.list.splice(state.list.indexOf(todo), 1)
+  },
+
+  toggle (state, { todo }) {
+    todo.done = !todo.done
+  }
+}

lib/app/index.js

@@ -3,7 +3,7 @@
 import Vue from 'vue'
 import Meta from 'vue-meta'
 import router from './router.js'
-<% if (store) { %>import store from '~store/index.js'<% } %>
+<% if (store) { %>import store from './store.js'<% } %>
 import NuxtChild from './components/nuxt-child.js'
 import NuxtLink from './components/nuxt-link.js'
 import Nuxt from './components/nuxt.vue'

lib/app/store.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+const files = require.context('~store', false, /^\.\/.*\.js$/)
+
+const storeData = { modules: {} }
+for (let filename of files.keys()) {
+  let name = filename.replace(/^\.\//, '').replace(/\.js$/, '')
+  if (name === 'index') {
+    Object.assign(storeData, files(filename))
+  } else {
+    storeData.modules[name] = files(filename)
+    storeData.modules[name].namespaced = true
+  }
+}
+
+export default new Vuex.Store(storeData)

lib/build/index.js

@@ -191,6 +191,10 @@ function * generateRoutesAndFiles () {
     templatesFiles.push('layouts/default.vue')
     layouts.default = r(__dirname, 'app', 'layouts', 'default.vue')
   }
+  // Add store if needed
+  if (this.options.store) {
+    templatesFiles.push('store.js')
+  }
   let moveTemplates = templatesFiles.map((file) => {
     return readFile(r(__dirname, 'app', file), 'utf8')
     .then((fileContent) => {

lib/nuxt.js

@@ -51,7 +51,7 @@ class Nuxt {
     this.dir = (typeof options.rootDir === 'string' && options.rootDir ? options.rootDir : process.cwd())
     this.srcDir = (typeof options.srcDir === 'string' && options.srcDir ? resolve(this.dir, options.srcDir) : this.dir)
     // If store defined, update store options to true
-    if (fs.existsSync(join(this.srcDir, 'store', 'index.js'))) {
+    if (fs.existsSync(join(this.srcDir, 'store'))) {
       this.options.store = true
     }
     // Template