В новом проекте я работал над страницей профиля пользователя. Я хочу сохранить данные формы из Vuex Store даже после того, как пользователь перезагрузит страницу, а также хочу очистить их по желанию или при выходе из системы. Я хочу, чтобы пользователь мог заполнить данные своего профиля, перезагрузить страницу и вернуться, чтобы обнаружить, что каждое поле формы все еще заполнено их заполненными данными.

Vuex-persistedstate - это пакет npm, который позволяет нам сохранять состояние Vuex в localStorage или cookies.

Реализованный проект 🌱

Репо 🌱

Установка

  1. Добавьте Vuex-persistedstate в свой проект.
yarn add or npm install vuex-persistedstate

2. Создайте новый экземпляр плагина в отдельном файле. Вы можете называть его как хотите. Я назвал его _3. Если присвоить вашему плагину имя «xxx.client.js», он будет выполняться только на стороне клиента.

3. Добавьте плагин в nuxt.config.js

// nuxt.config.js

...
/*
 * Naming your plugin 'xxx.client.js' will make it execute only on   the client-side.
 * https://nuxtjs.org/guide/plugins/#name-conventional-plugin
 */
plugins: [{ src: '~/plugins/persistedState.client.js' }]
...

4. Создать простую форму в index.vue можно где угодно. Я использую Beufy, это легкая библиотека компонентов пользовательского интерфейса для Vue.js / Nuxt.js на основе Bulma. Мне это очень нравится 🌱.

<template>
  <div class="p-5 columns">
    <div class="column">
      <section>
        <b-field label="Name">
          <b-input v-model="userName" type="text"></b-input>
        </b-field>

        <b-field label="Email">
          <b-input v-model="userEmail" type="email" maxlength="30"> </b-input>
        </b-field>

        <b-field label="Message">
          <b-input v-model="message" maxlength="200" type="textarea"></b-input>
        </b-field>

        <b-field label="Subject" class="mb-5">
          <b-select v-model="selected" placeholder="Select a subject" expanded>
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
          </b-select>
        </b-field>
      </section>
    </div>
    <div class="column">
      <section>
        <b-field>
          <b-switch @click.native="switchPersistance" v-model="isSwitch"
            >Start Persistance</b-switch
          >
        </b-field>
      </section>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'HomePage',

  data: () => ({
    isSwitch: false,
    userName: '',
    userEmail: '',
    message: '',
    selected: '',
  }),
  computed: {
    ...mapState({
      persistedState: 'persistedState',
    }),
  },
  methods: {
    // persist to vuex store
    ...mapActions({
      switchPersistanceState: 'switchPersistanceState',
    }),

    switchPersistance() {
      // when the switch is turned on do this.
      if (this.isSwitch === false) {
        const userInfo = {
          userName: this.userName,
          userEmail: this.userEmail,
          message: this.message,
          selected: this.selected,
        }

        this.switchPersistanceState(userInfo)
      }

      // When the swith is turned off, do this.
      if (this.isSwitch === true) {
        this.userName = ''
        this.userEmail = ''
        this.message = ''
        this.selected = ''

        this.switchPersistanceState(null)
      }
    },
  },
  // Do this when the page reloads
  mounted() {
    // check if persisted state exists
    if (this.persistedState !== null) {
      this.isSwitch = true
      this.userName = this.persistedState.userName
      this.userEmail = this.persistedState.userEmail
      this.message = this.persistedState.message
      this.selected = this.persistedState.selected
    } else {
      this.isSwitch = false
    }
  },
}
</script>

Вы должны увидеть что-то вроде этого:

5. Создайте файл vuex store с именем index.js.

export const state = () => ({
  persistedState: null,
  alert: false,
})

export const getters = {}

export const actions = {
  switchPersistanceState({ commit }, payload) {
    commit('SET_STATE', payload)
    commit('SET_ALERT', true)
  },
}

export const mutations = {
  SET_STATE(state, payload) {
    state.persistedState = payload
  },
  SET_ALERT(state, payload) {
    state.alert = payload
  },
}

6. Теперь мы, наконец, можем сохранить наши данные в localStorage, используя vuex-persistedstate.

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
    key: 'vuex',
    paths: ['persistedState'],
  })(store)
}

7. Просмотрите сохраненные данные в действии. Откройте devtools. Я использую Google Chrome. Перейдите в Приложение и нажмите Локальное хранилище.

Вывод

Вот и все. Надеюсь, это поможет вам создавать «универсальные» приложения, которые сохраняют данные между серверным и клиентским рендерингом.

Алеко 🌱