mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-26 23:52:06 +00:00
No more store option (implicit now)
This commit is contained in:
parent
61595c61f8
commit
f4bff18836
@ -2,21 +2,13 @@
|
|||||||
|
|
||||||
> Using a store to manage the state is important to every big application, that's why nuxt.js implement Vuex in its core.
|
> Using a store to manage the state is important to every big application, that's why nuxt.js implement Vuex in its core.
|
||||||
|
|
||||||
## Activate the store option
|
## Activating the store
|
||||||
|
|
||||||
First, we need to tell nuxt.js to activate the store, for this, we add a `nuxt.config.js` file:
|
Nuxt.js will try to `require('./store/index.js')`, if exists, it will import `Vuex`, add it to the vendors and add the `store` option to the root `Vue` instance.
|
||||||
|
|
||||||
```js
|
|
||||||
module.exports = {
|
|
||||||
store: true
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Create the store folder
|
## Create the store folder
|
||||||
|
|
||||||
When the store option is activated, nuxt will import it via `require('./store')`
|
Let's create a file `store/index.js`:
|
||||||
|
|
||||||
After creating the `store/` folder, we can create our `store/index.js` file:
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
@ -38,11 +30,11 @@ const store = new Vuex.Store({
|
|||||||
export default store
|
export default store
|
||||||
```
|
```
|
||||||
|
|
||||||
> You don't need to install vuex since it's shipped with nuxt.js
|
> We don't need to install `Vuex` since it's shipped with nuxt.js
|
||||||
|
|
||||||
## Voilà !
|
## Voilà !
|
||||||
|
|
||||||
You're ready to use `this.$store` inside your `.vue` files :)
|
We can now use `this.$store` inside our `.vue` files.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
@ -56,7 +48,7 @@ You're ready to use `this.$store` inside your `.vue` files :)
|
|||||||
|
|
||||||
The `fetch` method, *if set*, is called every time before loading the component (*only if attached to a route*). It can be called from the server-side or before navigating to the corresponding route.
|
The `fetch` method, *if set*, is called every time before loading the component (*only if attached to a route*). It can be called from the server-side or before navigating to the corresponding route.
|
||||||
|
|
||||||
The `fetch` method receives the context as the first argument, you can use it to fetch some data and fill the store. To make the fetch method asynchronous, **return a Promise**, nuxt.js will wait for the promise to be resolved before rendering the Component.
|
The `fetch` method receives the context as the first argument, we can use it to fetch some data and fill the store. To make the fetch method asynchronous, **return a Promise**, nuxt.js will wait for the promise to be resolved before rendering the Component.
|
||||||
|
|
||||||
For example:
|
For example:
|
||||||
```js
|
```js
|
||||||
@ -76,7 +68,7 @@ To see the list of available keys in `context`, take a look at [this documentati
|
|||||||
|
|
||||||
## Action `nuxtServerInit`
|
## Action `nuxtServerInit`
|
||||||
|
|
||||||
If you define the action `nuxtServerInit` in your store, nuxt.js will call it with the context, it can be useful when having some data on the server you want to give to the client-side, for example, the authenticated user:
|
If we define the action `nuxtServerInit` in our store, Nuxt.js will call it with the context. It can be useful when having some data on the server we want to give directly to the client-side, for example, the authenticated user:
|
||||||
```js
|
```js
|
||||||
// store/index.js
|
// store/index.js
|
||||||
actions: {
|
actions: {
|
||||||
|
@ -4,8 +4,8 @@
|
|||||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import Meta from 'vue-meta/lib/vue-meta.js' // require the ES2015 lib
|
import Meta from 'vue-meta/lib/vue-meta.js' // require the ES2015 lib
|
||||||
import router from './router'
|
import router from './router.js'
|
||||||
<% if (store) { %>import store from '~store'<% } %>
|
<% if (store) { %>import store from '~store/index.js'<% } %>
|
||||||
|
|
||||||
Vue.use(Meta, {
|
Vue.use(Meta, {
|
||||||
keyName: 'head', // the component option name that vue-meta looks for meta info on.
|
keyName: 'head', // the component option name that vue-meta looks for meta info on.
|
||||||
|
@ -84,14 +84,6 @@ module.exports = function * () {
|
|||||||
}
|
}
|
||||||
process.exit(1)
|
process.exit(1)
|
||||||
}
|
}
|
||||||
if (this.options.store && !fs.existsSync(join(this.dir, 'store'))) {
|
|
||||||
console.error('> No `store` directory found (store option activated). Please create on under the project root')
|
|
||||||
process.exit(1)
|
|
||||||
}
|
|
||||||
if (this.options.store && !fs.existsSync(join(this.dir, 'store', 'index.js'))) {
|
|
||||||
console.error('> No `store/index.js` file found (store option activated). Please create the file.')
|
|
||||||
process.exit(1)
|
|
||||||
}
|
|
||||||
debug(`App root: ${this.dir}`)
|
debug(`App root: ${this.dir}`)
|
||||||
debug('Generating .nuxt/ files...')
|
debug('Generating .nuxt/ files...')
|
||||||
/*
|
/*
|
||||||
|
@ -10,7 +10,7 @@ const serialize = require('serialize-javascript')
|
|||||||
const build = require('./build')
|
const build = require('./build')
|
||||||
const generate = require('./generate')
|
const generate = require('./generate')
|
||||||
const serveStatic = require('serve-static')
|
const serveStatic = require('serve-static')
|
||||||
const { resolve } = require('path')
|
const { resolve, join } = require('path')
|
||||||
const { urlJoin } = require('./utils')
|
const { urlJoin } = require('./utils')
|
||||||
const { encodeHtml, getContext, setAnsiColors } = require('./utils')
|
const { encodeHtml, getContext, setAnsiColors } = require('./utils')
|
||||||
setAnsiColors(ansiHTML)
|
setAnsiColors(ansiHTML)
|
||||||
@ -27,7 +27,6 @@ class Nuxt {
|
|||||||
head: {},
|
head: {},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
css: [],
|
css: [],
|
||||||
store: false,
|
|
||||||
cache: false,
|
cache: false,
|
||||||
loading: {
|
loading: {
|
||||||
color: 'black',
|
color: 'black',
|
||||||
@ -51,6 +50,10 @@ class Nuxt {
|
|||||||
// Env variables
|
// Env variables
|
||||||
this.dev = this.options.dev
|
this.dev = this.options.dev
|
||||||
this.dir = (typeof options.rootDir === 'string' && options.rootDir ? options.rootDir : process.cwd())
|
this.dir = (typeof options.rootDir === 'string' && options.rootDir ? options.rootDir : process.cwd())
|
||||||
|
// If store defined, update store options to true
|
||||||
|
if (fs.existsSync(join(this.dir, 'store', 'index.js'))) {
|
||||||
|
this.options.store = true
|
||||||
|
}
|
||||||
// Template
|
// Template
|
||||||
this.appTemplate = _.template(fs.readFileSync(resolve(__dirname, 'views', 'app.html'), 'utf8'), {
|
this.appTemplate = _.template(fs.readFileSync(resolve(__dirname, 'views', 'app.html'), 'utf8'), {
|
||||||
imports: { serialize }
|
imports: { serialize }
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nuxt",
|
"name": "nuxt",
|
||||||
"version": "0.4.7",
|
"version": "0.4.8",
|
||||||
"description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
|
"description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
Loading…
Reference in New Issue
Block a user