如何使用 Vue.js + Vuex (createStore) 将 "state" 变量保存到浏览器 localStorage

Question

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

我试图保存到本地存储的两个变量是 'categories' 和 'locations'。

我只是出于某种原因无法触发它。我从来没有使用 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)
}

没有错误，但不起作用。

Answer 1

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

你的表也这样写：

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

Answer 2

在 link 之后加上很好的解释： 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)
    }
}

如何使用 Vue.js + Vuex (createStore) 将 "state" 变量保存到浏览器 localStorage

How to save "state" variables to the browser localStorage using Vue.js + Vuex (createStore)

state

local-storage

vue.js

vuex