Add vuex-persistedstate example

This commit is contained in:
Sebastien Chopin 2017-08-22 13:24:23 +02:00
parent 8dca358216
commit ef4cdd4776
5 changed files with 57 additions and 0 deletions

View File

@ -0,0 +1,3 @@
# Nuxt.js with Vuex persisted state (localStorage)
See https://github.com/robinvdvleuten/vuex-persistedstate

View File

@ -0,0 +1,6 @@
module.exports = {
/*
** We set `spa` mode to have only client-side rendering
*/
mode: 'spa'
}

View File

@ -0,0 +1,12 @@
{
"name": "nuxt-vuex-store",
"dependencies": {
"nuxt": "^1.0.0-rc6",
"vuex-persistedstate": "^2.0.0"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}

View File

@ -0,0 +1,22 @@
<template>
<div>
<p>{{ counter }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['counter'])
},
methods: {
...mapMutations(['increment', 'decrement'])
}
}
</script>

View File

@ -0,0 +1,14 @@
import createPersistedState from 'vuex-persistedstate'
export const state = () => ({
counter: 0
})
export const mutations = {
increment: (state) => state.counter++,
decrement: (state) => state.counter--
}
export const plugins = [
createPersistedState()
]