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

Question

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

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

我只是由于某种原因无法触发它。我从未使用 vue.js/vuex 这样做过。

我发现的所有示例都data: {}在“常规”组件中使用该对象。在我的示例中，我尝试加载并保存到状态变量。请帮忙。我已经粘贴了整个 vuexcreateStore对象（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

点击带有精彩解释的链接： 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)
    }
}