vue中的vuex的数据持久化

首先，什么是vuex？vuex就是一个集中式的状态管理工具,在许多页面需要共享同一个或者多个值/状态的时候就会用到vuex, 但是,vuex不同于cookie和localStroage, 页面刷新, state中的数据就会丢失。因此我们需要对vuex中的状态做持久化的处理。

使用插件 vuex-persistedstate 对数据进行数据的持久化处理

1.安装

npm install vuex-persistedstate --save

在store下的index.js下引入

import createPersistedState from "vuex-persistedstate";

使用：

// 数据的持久化处理
  plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.cookies,//存储到cookie
      // storage:window.sessionStorage 存储到sessionStorage
      // 如果不写默认存储到localStorage
      // 存储的 key 的key值
      key: "store",
      render(state) {
        // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
        return { ...state };
        //需要存储其中的某些数据的话需要单独取出来
       // return {
        	//只储存state中的assessmentData
            //assessmentData: val.assessmentData
      //}
    })
  ]

也可以使用多个插件
plugins要是一个一维数组不然会解析错误

 plugins: debug ? [createLogger(), createPersisted] : [createPersisted]

补充，实际开发中，我们不会把所有的状态都只放在一个state中，所以就有了modules
当我们有多个vuex状态的时候

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user.js' //这是专门管理user的
import admin from './admin.js' // 这是专门管理admin的
Vue.use(Vuex)
let storeRoot={
  state: {
	  
  },
  mutations: {
	 
  },
  actions: {
	  
  },
  modules: {
  	//在这里进行引用
	  user,
	  admin
  }
}

export default new Vuex.Store(storeRoot) //导出

admin文件

let admin={
	namespaced: true,
	state: {
	},
	mutations: {
	},
	actions: {
		}
	}
}

export default admin

文章到此结束，加油，前端的路还很远！！！！！！！