ログイン認証の永続化やカート追加などブラウザの一時的なデータ保存に役立つWebStorageを使ってお気に入り機能の実装の流れをメモしておきます。
vuex-persistedstateのインストール・設定
vuex-persistedstateを使ってWebStorageにVuexのステート情報を保存する方法でやっていきます。package.jsonにvuex-persistedstateを追記し、mpm installコマンドでインストールします。
・package.json
1 2 3 4 5 6 7 | ... "dependencies": { "vuex-persistedstate": "^2.7.0" }, ... |
インストールしたらpluginsディレクトリ配下にpersistedstate.jsファイルを作成し、以下のように永続化させる情報を設定していきます。
keyはWebStorageにキーとなる文字列を入力し、pathsはVuexのステート情報を保存しているファイル名を入力します。
WebStorageにはlocalStorageとsessionStorageがあります。localStorageはブラウザを閉じてもデータを保持されますが、sessionStorageはブラウザを閉じるとデータは破棄されます。今回はsessionStorageを使用して実装していきます。
・persistedstate.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import createPersistedState from 'vuex-persistedstate' export default ({ store, isHMR }) => { if (isHMR) { return } if (process.client) { window.onNuxtReady((nuxt) => { createPersistedState( { key: 'sample', paths: ['favorite'], storage: window.sessionStorage } )(store) }) } } |
nuxt.config.jsのpluginsに先ほど作成したファイルパスを追記し、設定完了です。
・nuxt.config.js
1 2 3 4 5 6 7 8 | ... plugins: [ // Doc: https://github.com/robinvdvleuten/vuex-persistedstate { src: '@/plugins/persistedstate', mode: 'client' } ], ... |
お気に入りストアを作成する
実際にWebStorageと連携し保存するストアを書いていきます。
今回はお気に入りのIDを保存することで、そのIDに紐づくデータを後から取得できるようにします。
後で呼び出されるようにお気に入り登録した際にIDを格納する処理と削除する処理も書いておきます。
・store/favorite.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | export const state = () => ({ /** * お気に入り情報 * @typedef {object} favorite * @property {array} id サンプルID */ favorite: { id: [] } }) export const getters = { /** * お気に入り情報を取得する * @return {object} */ favorite: state => state.favorite, /** * お気に入り情報のサンプルIDを取得する * @return {array} */ id: state => state.favorite.id } export const mutations = { /** * お気に入り登録するサンプルIDを格納する * すでに格納されていた場合はエラー * 25件以上の場合はエラー * @param state * @param {array} id */ addFavoriteId (state, { id }) { if (state.favorite.id.includes(id)) { alert('既に登録済みです') return } if (state.favorite.id.length >= 25) { alert('お気に入りに登録できるのは25件までです') return } state.favorite.id.push(id) }, /** * お気に入り登録するサンプルIDを解除する * すでに解除されていた場合はエラー * @param state * @param {array} id */ releaseFavoriteId (state, { id }) { if (!state.favorite.id.includes(id)) { alert('既に解除済みです') return } state.favorite.id.splice(state.favorite.id.indexOf(id), 1) }, /** * お気に入りを情報をクリアする（=初期状態のデータを格納する） * @param state */ clearFavorite (state) { state.favorite = { id: [] } } } |
お気に入り登録する
お気に入り登録したいページに登録・解除の処理を実装していきます。
まずmapGettersからWebStorageに格納されているお気に入り情報を取得します。既にお気に入り登録されているかどうかの条件判定をし、登録・解除のボタンをそれぞれ出し分けます。
お気に入り登録した情報を表示したい場合は、mapGettersからfavoriteを呼び出しidに紐づいたデータをAPIから取得する感じになります。情報量が少ない場合は、APIからデータを呼び出さずにfavoriteにプロパティを追加してWebStorage(容量5MB)に持っておいても良いと思います。
・pages/sample/index.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | ... <button v-if="favorite.id.includes(sample.id)" @click="releaseFavoriteId(sample.id)" > お気に入り解除 </button> <button v-else @click="addFavoriteId(sample.id)" > お気に入り登録 </button> ... <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters(samples, [samples]), ...mapGetters('favorite', ['favorite']) }, methods: { addFavoriteId (id) { this.$store.commit('favorite/addFavoriteId', { id }) }, releaseFavoriteId (id) { this.$store.commit('favorite/releaseFavoriteId', { id }) } } } </script> |