vuex数据持久化

1、安装

npm i vuex -S

2、在src目录下，新建store/index.js文件

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        user: ""
    },
    // mutations更改数据
    mutations: {
        setUserInfo: (state, data) => {
            state.user = data;
        }
    },
    // actions异步处理数据
    actions: {
        setUserInfo({commit}) {
            commit('setUserInfo')
        }
    }
})

3、使用

import store from '@/store'
//取值
store.state.user
//赋值
store.commit('setUserInfo', 'Jack')

// 如果全局使用，将store引入main.js
import store from '@/store'
const vm = new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})
// 调用
this.$store

4、vuex在刷新浏览器后，数据会丢失，使用vuex-persistedstate插件

(1)安装
npm i vuex-persistedstate -S
(2)引入store
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: {} // 用户信息
  },
  mutations: {
    setUserInfo (state, data) {
      state.userInfo = data
    }
  },
  plugins: [createPersistedState({
    key: 'myStore', // 存储在localStorage的key名，默认为vuex
    storage: window.localStorage
    // 指定持久化对象，不配置则数据全部持久化
    // reducer (state) {
    //   return {
    //     userInfo: state.userInfo
    //   }
    // }
  })]
})