如何在 vuejs 中设置值选择加载页面答案

【问题标题】：How to set value select load page in vuejs如何在 vuejs 中设置值选择加载页面
【发布时间】：2021-09-17 19:34:29
【问题描述】：

// Template
<v-select
  :options="options"
  class="type"
  v-model="type"
  @input="changeType()"
/>

// Script
created() {
  this.type = localStorage.getItem('type')
},
methods: {
  changeType: function () {
    localStorage.setItem("type", this.type);
  }
}

当我刷新页面或返回此页面时，我希望选择之前选择的选项。我如何使用 VueJS 做到这一点？

【问题讨论】：

您可以在刷新之前使用存储设置值，然后在刷新完成后立即取回数据。
你能告诉我更多......谢谢
你在使用 vuetify 吗？
您需要先检测页面刷新或页面更改，请参阅：stackoverflow.com/questions/58495019/… 然后在页面实际刷新之前您需要将数据保存在存储中。现在，当您返回同一页面时，您可以使用存储加载该页面的数据。

标签： vue.js vue-component

【解决方案1】：

查看这篇文章：Vue single page application how to retain state data when page refreshes

import Vuex from "vuex"
 
Vue.use(Vuex)
 
function storeLocalStore (state) {
    window.localStorage.setItem("userMsg",JSON.stringify(state));
}
 
export default new Vuex.Store({
    state: {
        username: "Wang Er",
        schedulename: "title",
        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中，所以Wang Er是在App.vue的created的钩子函数里面写了如下代码：

/ / Read the status information in localStorage when the page loads
localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));

/ / Save the information in vuex to localStorage when the page is refreshed
window.addEventListener("beforeunload",()=>{
    localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})

【讨论】：