uniapp 使用state 持久化存【已解决】

state状态管理，刷新页面后他是会重置的，并不能做到持久化保存数据

这个时候我们有两种方法

1，利用H5的本地存储(localStorage，sessionStorage);（不推荐，用了这个state好像又没什么用了）

2，利用第三方封装好的插件，例如vuex-persistedstate；

vuex-persistedstate是一个Vuex插件，可以将Vuex store的状态持久化存储到浏览器的localStorage或sessionStorage中，使得用户下次打开页面时能够继续使用之前的应用状态。这样可以避免用户在刷新页面或关闭浏览器后所有状态都丢失的情况。

首先我们要引入插件：https://pan.baidu.com/s/14NPn4dmC5FbRzP86dOATwQ

提取码：7ty9

首先这是没有持久化的

这个时候我的state是没有用户信息的userinfo没有数据，注意这里不加插件也是可以拿到你的初始设置的数据的，但是至少不能变更，不能保留实现持久化的

加入插件后实现持久化

这里我已经拿到用户数据了，刷新也是会保留的，实现了持久化，下面是代码部分

1，首先新建一个状态管理store目录，放入插件js，新建index.js

2，indexjs

import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
import createPersistedState from "vuex-persistedstate";

export default new Vuex.Store({
    state:{
        num:1,
        userinfo:{}
    },
    getters:{
        
    },
    mutations:{
        set_userinfo(state,data){
            state.userinfo=data
        }
    },
    actions:{},
    modules:{},
    
    plugins: [
      createPersistedState({
        // 存储方式
          storage:window.localStorage,
          key:'userinfo',
          reducer(state) {
              return {...state}
          }
        
      }),
    ],
})

3，引入store

4,使用commit调用方法，存入数据

this.$store.commit('set_userinfo',res.data)

这里的set_userinfo是我们index.js里面自己写的，方法名随意

然后去页面打印刷新看数据是否持久化

ok,是不是很简单，有问题滴滴我，一起加油！！！！！