mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 14:15:13 +00:00
documenting store generation
This commit is contained in:
parent
e2d5d2fa61
commit
09d0d03198
@ -1,33 +1,51 @@
|
||||
# Nuxt.js with Vuex
|
||||
# Nuxt.js with Vuex 2
|
||||
|
||||
> Using a store to manage the state is important to every big application, that's why nuxt.js implement Vuex in its core.
|
||||
|
||||
> Alternative way of creating a store modularly.
|
||||
|
||||
## Activating the store
|
||||
|
||||
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.
|
||||
Nuxt.js will look for the `./store/` directory, if it exists, its will import and use Vuex. If there is no `./store/index.js` file that returns a store, Nuxt.js will go through all files of the `./store/` directory and create a store with a module for each file (`./store/index.js` being "root" module).
|
||||
|
||||
## Create the store folder
|
||||
|
||||
Let's create a file `store/index.js`:
|
||||
|
||||
```js
|
||||
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: {
|
||||
increment (state) {
|
||||
state.counter++
|
||||
}
|
||||
export const mutations = {
|
||||
increment (state) {
|
||||
state.counter++
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
export default store
|
||||
and
|
||||
`store/todos.js`:
|
||||
|
||||
```js
|
||||
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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> We don't need to install `Vuex` since it's shipped with nuxt.js
|
||||
@ -42,42 +60,35 @@ We can now use `this.$store` inside our `.vue` files.
|
||||
</template>
|
||||
```
|
||||
|
||||
## fetch (context)
|
||||
|
||||
> Used to fill the store before rendering the page
|
||||
|
||||
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, 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:
|
||||
The store will be as such:
|
||||
```js
|
||||
export default {
|
||||
fetch ({ store, params }) {
|
||||
return axios.get('http://my-url')
|
||||
.then((res) => {
|
||||
store.commit('setUser', res.data)
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Context
|
||||
|
||||
To see the list of available keys in `context`, take a look at [this documentation](https://github.com/nuxt/nuxt.js/tree/master/examples/async-data#context).
|
||||
|
||||
## Action `nuxtServerInit`
|
||||
|
||||
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
|
||||
// store/index.js
|
||||
actions: {
|
||||
nuxtServerInit ({ commit }, { req }) {
|
||||
if (req.authUser) {
|
||||
commit('user', req.authUser)
|
||||
new Vuex.Store({
|
||||
state: { counter: 0 },
|
||||
mutations: {
|
||||
increment (state) {
|
||||
state.counter++
|
||||
}
|
||||
},
|
||||
modules: {
|
||||
todos: {
|
||||
state: {
|
||||
list: []
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
The context given to `nuxtServerInit` is the same as the `data` of `fetch` method except `context.redirect()` and `context.error()` are omitted.
|
||||
|
Loading…
Reference in New Issue
Block a user