В новом проекте я работал над страницей профиля пользователя. Я хочу сохранить данные формы из Vuex Store даже после того, как пользователь перезагрузит страницу, а также хочу очистить их по желанию или при выходе из системы. Я хочу, чтобы пользователь мог заполнить данные своего профиля, перезагрузить страницу и вернуться, чтобы обнаружить, что каждое поле формы все еще заполнено их заполненными данными.
Vuex-persistedstate - это пакет npm, который позволяет нам сохранять состояние Vuex в localStorage
или cookies
.
Репо 🌱
Установка
- Добавьте 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. Перейдите в Приложение и нажмите Локальное хранилище.
Вывод
Вот и все. Надеюсь, это поможет вам создавать «универсальные» приложения, которые сохраняют данные между серверным и клиентским рендерингом.
Алеко 🌱