vue 使用 vuex-persist 让store实现更便捷的存储 localStorage

安装 vuex-persist，

我这里用的是yarn： yarn add vuex-persist

使用这是关于 vuex-persist 的文档 https://www.npmjs.com/package/vuex-persist有需要深度要了解的可以看一下这个

简单应用：

在全局的store中 

引入 import VuexPersistence from 'vuex-persist'

并且使用

 

1、在全局的state声明一个值 如：

const state = {
    query: {},
}

 2、在mutations中写方法，当query变化的时候调用更新数据

const mutations = {
    setDetailQuery (state, query) {
        state.detailQuery = query
    }
}

3、在 Store中添加vuex-persist的调用

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins:[
        new VuexPersistence({
            reducer: state => ({
                query: state.query //这个就是存入localStorage的值
            })
        }).plugin
    ]
})

4、在需要存localStorage 的页面调用

import {mapState, mapGetters, mapMutations} from 'vuex' //引入state，getters，mutations

  在methods里边引入mutations 方法

...mapMutations(['setQuery'])

  在需要的地方使用，例：

  在created 里边 调用方法 

this.setQuery(this.$route.query)

5、在需要取的页面 

 computed: {
    ...mapState(['query']),
  },