Как сохранить данные о состоянии при обновлении страницы в одностраничном приложении vue

внешний интерфейс Vue.js Vuex товар

В одностраничном приложении Vue, если вы нажмете «Обновить» на определенной странице определенного маршрута, информация о состоянии страницы может быть потеряна после обновления. Что нужно делать в это время? Если у вас также есть это сомнение, эта статья может помочь вам

1. Проблемы

Теперь в продукте есть требование: одностраничное приложение переходит на определенную страницу, а затем нажимает обновить, обновленная страница должна соответствовать странице до обновления.

На данный момент нам нужно сохранить состояние страницы перед обновлением.

Во-вторых, решение

В этом одностраничном приложении Vue Ван Эр использует Vuex для управления состоянием.В начале идея Ван Эра заключалась в том, чтобы синхронизировать данные в Vuex с localStorage.

То есть: как только данные в vuex будут изменены, он сработаетlocalStorage.setItemметод, обратитесь к следующему коду:

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

function storeLocalStore (state) {
    window.localStorage.setItem("userMsg",JSON.stringify(state));
}

export default new Vuex.Store({
    state: {
        username: "王二",
        schedulename: "标题",
        scheduleid: 0,
    },
    mutations: {
        storeUsername (state,name) {
            state.username = name
            storeLocalStore (state)
        },
        storeSchedulename (state,name) {
            state.schedulename = name
            storeLocalStore (state)
        },
        storeScheduleid (state,id) {
            state.scheduleid = Number(id)
            storeLocalStore (state)
        },
    }
})

Затем, когда страница загружается, данные извлекаются из localStorage и помещаются в vuex, поэтому Ван Эр находится вApp.vueизcreatedВ функции ловушки написан следующий код:

localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));

//考虑到第一次加载项目时localStorage里没有userMsg的信息，所以在前面要先做判断

Это позволит решить проблему более удовлетворительно.

3. Другое решение

Приведенное выше решение связано с частым срабатываниемlocalStorage.setItemметод, поэтому он очень недружелюбен к производительности. И если вы продолжите синхронизировать данные в vuex с localStorage, мы можем напрямую использовать localStorage для управления состоянием, и кажется, что нет необходимости снова использовать vuex.

В это время Ван Эр подумал, что если есть какой-либо способ отслеживать событие обновления страницы, а затем сохранять данные в Vuex в localStorage в этом методе мониторинга, это было бы здорово.

К счастью, есть такое событие слушателя, мы можем использоватьbeforeunloadДля достижения вышеуказанной цели Ван Эр вApp.vueизcreatedВ функции ловушки написан следующий код:

    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
    
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
    })

Таким образом, это кажется идеальным.

Добавлено 27 марта 2018 г.:

Когда Ван Эр использовал вышеуказанный метод, он столкнулся с проблемой, а именно: на этапе разработки,Если в Vuex добавляется новое поле, новое поле нельзя сохранить в localStorage., поэтому приведенный выше код изменяется следующим образом:

    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
    
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
    })

Оригинальный адрес:Личный сайт Ван Юлюэ

Категории