在定义store命名空间时，使用vuex-persistedstate持久化指定数据

Vuex是为Vue设计的状态管理器，但在使用时，有一个比较头疼的问题，即Vuex不能直接做数据的持久化，因为它的数据是保存在内存当中，当刷新页面时，内存即释放，我们需要持久保存的数据也就没有了。这时但我们可以借助于Web Storage来做持久化，但原生的Web Storage比较繁琐，这里我们来说一下Vuex的插件vuex-persistedstate。

安装：

    npm install vuex-persistedstate --save

配置及使用：

    在store的index.js文件中引入vuex-persistedstate

        import createPersistedState from 'vuex-persistedstate'

    定义vuex-persistedstate的配置信息

        const vuexPersisted= new createPersistedState({

            key: 'vuexPersistedTest',                //定义KEY名

            storage: window.localStorage,        //定义信息存储模式：window.localStorage（默认）、sessionStorage、cookie

            reducer: (state)=> ({                        //reducer为定义是否为存储指定信息，如果存储全局信息，即可不用定义。

                //因为是一个新手，又是自己看看视频的，所以，这里是我踩的一个比较苦逼的坑（也是自己发现及解决问题的能力不够）。当在modules下的文件中，定义了命名空间（即：namespaced: true）时，这里即需要对持久化的state进行对象分组，即与命名空间名称保持一致，否则，state状态数据将直接存储在Web Storage的key下，而不是存储在key下面的分组里，vuex-persistedstate在自动数据处理的时候就会出问题。（可以自己看一下在使用命名空间时，不定义reducer、定义reducer不进行对象分组、定义reducer进行对象分组时，Web Storage所存储的数据格式）

                //方法一：进行对象分组

                TestModules:{

                    testState:state.TestModules.testState,

                },

                //方法二：不进行对象分组

                testState:state.TestModules.testState,

            }),

        });

    插件定义

        在Store中插件管理中进行定义

            export default new Vuex.Store({

                ........

                plugins:[vuexPersisted]

                //注意：如果此刻想配置多个选项，将plugins写成一个一维数组，不然会报错。

            })

    还有一个其他的设置及配置，在这里就不说了，在网上搜一下都有好多的。

        备注：window.localStorage与sessionStorage的主要区别是数据的生命周期不同。sessionStorage为当前会话期可用，window.localStorage为一直存在，除非清除，所以根据要求选择合适的 storage