如何使用 Vue.js + Vuex (createStore) 将“状态”变量保存到浏览器 localStorage

Posted 2023-02-22

【中文标题】如何使用 Vue.js + Vuex (createStore) 将“状态”变量保存到浏览器 localStorage

【英文标题】：How to save "state" variables to the browser localStorage using Vue.js + Vuex (createStore)

【发布时间】：2021-10-01 08:17:46

【问题描述】：

我正在尝试加载（使用mounted()）并保存（使用watch: ... 方法）到/从localStorage。

我试图保存到本地存储的两个变量是“类别”和“位置”。

由于某种原因，我无法触发它。我从来没有使用过 vue.js/vuex。

我发现的所有示例都在“常规”组件中使用data: 对象。在我的示例中，我试图加载并保存到状态变量。 请帮忙。我已经粘贴了整个 vuex createStore 对象（project/src/store/index.js）：

import  createStore  from 'vuex'

export default createStore(
    state: 
        categories: [ "Food", "Bars", "Parks"],
        locations: [],
    ,
    mutations: 
        addCategory(state, newCategory) 
            state.categories.push(newCategory)
        , 
        removeCategory(state, i) 
            state.categories.splice(i, 1);
        , 
        saveCategory(state, data) 
            state.categories[data.item] = data.text
        , 
        addLocation(state, data) 
            state.locations.push(data)
        ,
        deleteLocation(state, i) 
            state.locations.splice(i, 1);
        , 
        saveLocation(state, data) 
            state.locations[data.index].categories = data.item
        ,

    ,
    watch:
        categories(newCategories) 
            console.log(newCategories)
            localStorage.categories = JSON.stringify(newCategories)
        , 
        locations(newLocations) 
            console.log(newLocations)
            localStorage.locations = JSON.stringify(newLocations)
        
    ,
    actions: 
    ,
    modules: 
    , 
    mounted() 
        console.log(localStorage.categories)
        console.log(localStorage.locations)
        if (localStorage.categories) 
            this.categories = JSON.parse(localStorage.categories)
            if (localStorage.locations) 
                this.locations = JSON.parse(localStorage.locations)
        

    
)

编辑：

试过了：

"state.categories" (newCategories) 
    console.log(newCategories)
    localStorage.categories = JSON.stringify(newCategories)
, 
"state.locations" (newLocations) 
    console.log(newLocations)
    localStorage.locations = JSON.stringify(newLocations)

没有错误但不起作用。

【参考方案1】：

点击链接并给出很好的解释： https://www.mikestreety.co.uk/blog/vue-js-using-localstorage-with-the-vuex-store/

在我的/project/src/main.js 文件中：

store.subscribe( (mutation, state) => 
    localStorage.setItem('categories', JSON.stringify(state.categories));  
    localStorage.setItem('locations', JSON.stringify(state.locations));  
)

在我的/project/src/App.vue 文件中，我添加了以下内容（尽管我很确定使用“mounted()”也可以：

beforeMount() 
    this.$store.commit('initialiseVars')
,  

并为/project/src/store/index.js添加了一个变异方法：

initialiseVars(state) 
    if (localStorage.getItem('categories')) 
        state.categories = JSON.parse(localStorage.categories)
        if (localStorage.getItem('locations')) 
            state.locations = JSON.parse(localStorage.locations)
    

【参考方案2】：

我认为您可以做的是将挂载和监视代码移动到您的 App.vue，因为只要您的网络应用程序加载，该组件就会始终加载。

也为你的手表写这样的：

"state.categories" () 
  // your code here

【讨论】：

没有错误但没有保存任何东西（或触发我的console.log）

我尝试了几种变体。我的 main.js 看起来像这样：createApp(App).use(store).mount('#app')。在我的 App.vue 文件中，我有初始的 Vue。我添加了手表并安装在那里，但它们没有达到状态。

您确定您的 Vuex 商店已正确加载吗？尝试 console.log "this.state" 你的 Vue 初始化是否如下所示： new Vue( store, render: h => h(App) ).$mount("#app");