Nuxtjs中使用store管理数据，并实现持久化存储

Nuxtjs中使用store管理数据，并实现持久化存储

实现步骤：

一：存储数据在store中：在store文件夹新建userstore.js，并添加以下代码

userstore.js中的代码：

export const state = () => ({
        // 这里是全局数据保存的地方
        userInfo: {}
    })
    // 修改state里面的函数必须用到mutations里面的函数
export const mutations = {
    setUserInfo(state, data) {
        // 每个 mutation 函数都可以接受到两个参数
        // 第一个是 state 对象本身
        // 第二是调用函数时额外添加的数据
        // 这里需要做的就是改变 state 数据
        // 这样外面调用这个函数, 并且传入数据, 即可改变当前的 userInfo 属性
        state.userInfo = data
    },

使用：以一个简单的登录功能为例

说明：登录成功之后通过this.$store.commit(‘userstore/setUserInfo’,res.data)就将数据存储到了store中

注意：此时的数据只是暂时存储到了store中并没有持久化也就是永久存储，页面刷新后就不见了，下一步我们需要将数据持久化存储

二：保存store到本地

现在用户已经保存到store了，但是还有一个问题，数据是保存在缓存中的，如果页面一刷新，那么数据就会不见了，这样是不合理的。

所以我们需要使用localStorage把数据保存到本地，但是由于nuxtjs是运行在服务器的，不能直接在store中使用浏览器的方法，所以我们需要依赖一些判断和插件。

思路：将用户信息保存到本地中以实现永久存储

1、安装插件：npm install --save vuex-persistedstate

插件地址入口
2、在plugins中新建localStorage.js,并添加以下代码：

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
    window.onNuxtReady(() => {
        createPersistedState({
            key: "store", // 读取本地存储的数据到store
        })(store)
    })
}

3、导入插件

修改nuxt.config.js配置文件，在plugins配置项中新增一条数据

plugins: [
    // 其他代码...
    { src: '@/plugins/localStorage', ssr: false }
],

修改完毕之后重启项目就可以实现利用store持久化存储信息了