From c2d8329bc0a88ce4864e8599d724b006898a23e4 Mon Sep 17 00:00:00 2001 From: Brendan Date: Mon, 26 Dec 2016 15:55:00 +0100 Subject: [PATCH] duplicate examples --- examples/vuex-store-2/README.md | 83 +++++++++++++++++++ examples/vuex-store-2/package.json | 11 +++ examples/vuex-store-2/pages/about.vue | 8 ++ examples/vuex-store-2/pages/index.vue | 29 +++++++ .../pages/todos.vue | 0 examples/vuex-store-2/store/index.js | 7 ++ .../store/todos.js | 0 examples/vuex-store/pages/index.vue | 5 +- examples/vuex-store/store/index.js | 20 +++-- 9 files changed, 154 insertions(+), 9 deletions(-) create mode 100644 examples/vuex-store-2/README.md create mode 100644 examples/vuex-store-2/package.json create mode 100644 examples/vuex-store-2/pages/about.vue create mode 100644 examples/vuex-store-2/pages/index.vue rename examples/{vuex-store => vuex-store-2}/pages/todos.vue (100%) create mode 100644 examples/vuex-store-2/store/index.js rename examples/{vuex-store => vuex-store-2}/store/todos.js (100%) diff --git a/examples/vuex-store-2/README.md b/examples/vuex-store-2/README.md new file mode 100644 index 0000000000..4bf9cbec9e --- /dev/null +++ b/examples/vuex-store-2/README.md @@ -0,0 +1,83 @@ +# Nuxt.js with Vuex + +> Using a store to manage the state is important to every big application, that's why nuxt.js implement Vuex in its core. + +## 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. + +## Create the store folder + +Let's create a file `store/index.js`: + +```js +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +const store = new Vuex.Store({ + state: { + counter: 0 + }, + mutations: { + increment (state) { + state.counter++ + } + } +}) + +export default store +``` + +> We don't need to install `Vuex` since it's shipped with nuxt.js + +## Voilà ! + +We can now use `this.$store` inside our `.vue` files. + +```html + +``` + +## 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: +```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) + } + } +} +``` + +The context given to `nuxtServerInit` is the same as the `data` of `fetch` method except `context.redirect()` and `context.error()` are omitted. diff --git a/examples/vuex-store-2/package.json b/examples/vuex-store-2/package.json new file mode 100644 index 0000000000..3bd4273fa4 --- /dev/null +++ b/examples/vuex-store-2/package.json @@ -0,0 +1,11 @@ +{ + "name": "nuxt-vuex-store", + "dependencies": { + "nuxt": "latest" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start" + } +} diff --git a/examples/vuex-store-2/pages/about.vue b/examples/vuex-store-2/pages/about.vue new file mode 100644 index 0000000000..f489bfe089 --- /dev/null +++ b/examples/vuex-store-2/pages/about.vue @@ -0,0 +1,8 @@ + diff --git a/examples/vuex-store-2/pages/index.vue b/examples/vuex-store-2/pages/index.vue new file mode 100644 index 0000000000..55131f0fee --- /dev/null +++ b/examples/vuex-store-2/pages/index.vue @@ -0,0 +1,29 @@ + + + diff --git a/examples/vuex-store/pages/todos.vue b/examples/vuex-store-2/pages/todos.vue similarity index 100% rename from examples/vuex-store/pages/todos.vue rename to examples/vuex-store-2/pages/todos.vue diff --git a/examples/vuex-store-2/store/index.js b/examples/vuex-store-2/store/index.js new file mode 100644 index 0000000000..a4521c2fc2 --- /dev/null +++ b/examples/vuex-store-2/store/index.js @@ -0,0 +1,7 @@ +export const state = { counter: 0 } + +export const mutations = { + increment (state) { + state.counter++ + } +} diff --git a/examples/vuex-store/store/todos.js b/examples/vuex-store-2/store/todos.js similarity index 100% rename from examples/vuex-store/store/todos.js rename to examples/vuex-store-2/store/todos.js diff --git a/examples/vuex-store/pages/index.vue b/examples/vuex-store/pages/index.vue index 55131f0fee..3ebbfdcac6 100644 --- a/examples/vuex-store/pages/index.vue +++ b/examples/vuex-store/pages/index.vue @@ -1,11 +1,8 @@ diff --git a/examples/vuex-store/store/index.js b/examples/vuex-store/store/index.js index a4521c2fc2..e5ad937c65 100644 --- a/examples/vuex-store/store/index.js +++ b/examples/vuex-store/store/index.js @@ -1,7 +1,17 @@ -export const state = { counter: 0 } +import Vue from 'vue' +import Vuex from 'vuex' -export const mutations = { - increment (state) { - state.counter++ +Vue.use(Vuex) + +const store = new Vuex.Store({ + state: { + counter: 0 + }, + mutations: { + increment (state) { + state.counter++ + } } -} +}) + +export default store