【Nuxt.js】Nuxt実践編：v-model + Vuex

前置き

v-model(input)の値を
Vuexに保存してみましょう🌟

通常はページ遷移をすると
入力した値が消えてしまいます💥

そこでデータ保存のできる
Vuexを使うわけです💡💕

具体的な使用例は…

性格診断🕵️‍♀️
各入力項目ごとに
ページ遷移しても
最後にその結果を反映して
こんな性格です！
と再表示させる

ショッピングサイト🛍
買い物カゴに追加した商品が
ページ遷移しても
残ったままにする

などがあります✨🍎

サーバーで保存したいんだけど💡
という方、
その場合でもVuexの使用は必須になるので
ぜひやってみてください🍀😄
この辺りは次で説明します✍️

⬇️Vuexとは何か、メリットなどは
　こちらをご覧ください✨👀
【Nuxt.js】Vuex基礎編：コードをスッキリさせよう
 【Nuxt.js】Vuexまとめ編：はじめる前に、簡単理解！

保存の種類と段階について

データ保存には段階があります👣

Vuexで管理をするようにする
Cookieで管理をするようにする
サーバーで管理をするようにする

2なら1は必須、
3でも1は必須で、2はやった方が良い
という物になります🌟

いずれにしてもVuexは使用するので
やっておきましょう💫🧙‍♀️

1番良いのはサーバー保存ですが、
通信の増加に伴って
サーバー料金も増えたりします💰
その対策として
Vuexのみを使用することもあります🍒

ただしデータ保存といっても
リロードすると初期状態に
戻ってしまうため、
リロードしてはいけない場所で使います💡

getterとsetterを使う

computedのgetterとsetterで
storeから呼び出します🌟

命名はstateとgettersの違いなどを
分かりやすくするために
gettersMessageなどにしています。
その時の役割で
命名してあげてください🍎

⬇️computedについて
【Nuxt.js】Nuxt文法編：computed

役割が分かれているので、
stateを直接呼び出さないように
注意してください💥✋

シンプルver.

まずはページ遷移などなしに
簡単に呼び出してみます。

<template>
  <div class="page">
    <input v-model="message">
    <p>
      送信内容: {{ message }}
    </p>
  </div>
</template>

<script>
export default {
  computed: {
    message: {
      get () {
        return this.$store.getters['gettersMessage']
      },
      set (value) {
        this.$store.commit('updateMessage', value)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

<p>

送信内容: {{ message }}

</p>

</div>

</template>

export default {

computed: {

message: {

get () {

return this.$store.getters['gettersMessage']

set (value) {

this.$store.commit('updateMessage', value)

}

</script>

</style>

export const state = () => ({
  obj: {
    message: '',
  }
})

export const getters = {
  gettersMessage: state => {
    return state.obj.message
  },
}

export const mutations = {
  updateMessage(state, message) {
    state.obj.message = message
  }
}

export const state = () => ({

obj: {

message: '',

}

})

export const getters = {

gettersMessage: state => {

return state.obj.message

}

export const mutations = {

updateMessage(state, message) {

state.obj.message = message

}

遷移ver.

inputをコンポーネントにします。
アトミックデザインでの分類を
するほど数がないので
componentsの直下に
InputDefault.vueで作成しています。

コンポーネントのimportや
登録は面倒なので
自動で行っています🌟
06: 自動でインポートする

directory

components/
--| InputDefault.vue

pages/
--| index.vue
--| result.vue

store/
--| index.js

<template>
  <div class="page">
    <input v-model="message">
    <p>
      送信内容: {{ message }}
    </p>
  </div>
</template>

<script>
export default {
  computed: {
    message: {
      get () {
        return this.$store.getters['gettersMessage']
      },
      set (value) {
        this.$store.commit('updateMessage', value)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

<p>

送信内容: {{ message }}

</p>

</div>

</template>

export default {

computed: {

message: {

get () {

return this.$store.getters['gettersMessage']

set (value) {

this.$store.commit('updateMessage', value)

}

</script>

</style>

export const state = () => ({
  obj: {
    message: '',
  }
})

export const getters = {
  gettersMessage: state => {
    return state.obj.message
  },
}

export const mutations = {
  updateMessage(state, message) {
    state.obj.message = message
  }
}

export const state = () => ({

obj: {

message: '',

}

})

export const getters = {

gettersMessage: state => {

return state.obj.message

}

export const mutations = {

updateMessage(state, message) {

state.obj.message = message

}

<template>
  <div class="page">
    <InputDefault />
    <nuxt-link
      to="/result"
      class="link"
    >
      遷移！
    </nuxt-link>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    > .link {
      text-decoration: none;
      color: deepskyblue;
    }
  }
</style>

<nuxt-link

to="/result"

class="link"

遷移！

</nuxt-link>

</div>

</template>

export default {

}

</script>

.page {

> .link {

text-decoration: none;

color: deepskyblue;

}

</style>

<template>
  <div class="page">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    message: {
      get () {
        return this.$store.getters['gettersMessage']
      },
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

<p>{{ message }}</p>

</div>

</template>

export default {

computed: {

message: {

get () {

return this.$store.getters['gettersMessage']

}

</script>

</style>

補足: mapを使う場合

gettersが複数ある場合に有効です！
今回は1つしかないので
あくまで書き方の参考に
してもらえると良いかと思います🌟

また、setterを使う必要はありません💡

⬇️mapについてはこちらをご覧ください
【Nuxt.js】Nuxt文法編：Vuexのmapって結局なに？？

computed

mapを使ってstoreを呼び出します💡
methodsでmutationを呼び出して
storeの値を書き換えています✍️

v-model

v-modelがない！？
と混乱した方！！！✋

v-modelは
v-onとv-bindを
まとめて1行で書くための
シュガーシンタックスです！
今回は値をバインドする必要がないので
@inputのみを使用しています。

⬇️v-modelについて
【Nuxt.js】Nuxt文法編：v-model①
【Nuxt.js】Nuxt文法編：v-model②

その他

コンポーネントのimportや
登録は面倒なので
自動で行っています🌟
06: 自動でインポートする

store/index.js
index.vue
この2つはパターン1と全く同じです🌟

<template>
  <div class="page">
    <input
      @input="updateMessage"
    >
    <p>
      送信内容: {{ gettersMessage }}
    </p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['gettersMessage'])
  },
  methods: {
    updateMessage (e) {
      this.$store.commit('updateMessage', e.target.value)
    },
  },
}
</script>

<style lang="scss" scoped>
</style>

<input

@input="updateMessage"

<p>

送信内容: {{ gettersMessage }}

</p>

</div>

</template>

import { mapGetters } from 'vuex'

export default {

computed: {

...mapGetters(['gettersMessage'])

methods: {

updateMessage (e) {

this.$store.commit('updateMessage', e.target.value)

}

</script>

</style>

<template>
  <div class="page">
    <p>{{ gettersMessage }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['gettersMessage'])
  },
}
</script>

<style lang="scss" scoped>
</style>

<p>{{ gettersMessage }}</p>

</div>

</template>

import { mapGetters } from 'vuex'

export default {

computed: {

...mapGetters(['gettersMessage'])

}

</script>

</style>

まとめ

Vuexやcomputed, v-modelなど
様々な知識を使うようになってきました🌟
そのため初心者タグから
中級者にしております❤️👏