Vue Nuxt.js Store

state

export const state = () => ({
 message: 'Hello World'
});

<template>
 <div>
  {{ this.$store.state.message }}
 </div>
</template>

<script>
export default {}
</script>

結果
Hello World

stateの変更

export const state = () => ({
 message: 'Hello World'
});

export const mutations = {
 change(state, value){
  state.message = value;
 }
}

<template>
 <div>
  {{ this.$store.state.message }}
 </div>
</template>

<script>
export default {
 mounted(){
  this.$store.commit('change', 'changed');
 }
}
</script>

結果
Hello World

changed

永続化

インストール

npm install vuex-persistedstate

永続化設定ファイル

※〜plugins/vuex-persistedstate.js
import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
 window.onNuxtReady(() => {
  vuex(store)で管理しているデータをWebStorageに保存
  createPersistedState({
   SessionStorageのkeyを設定
   key: 'test-key',
   特定のstoreのみ永続化する場合
   paths: [
    "message"
   ],
   SessionStorageに変更(デフォルトはLocalStorage)
   storage: window.sessionStorage
  })(store);
 });
};

永続化設定ファイル読込設定

※nuxt.config.js
plugins: [
 {
  scr: '~/plugins/vuex-persistedstate.js',
  ssr: false
 }
]

Follow me!

前の記事

Vue Nuxt.js

次の記事

JavaScript WebStorage