vuex状态持久化在vue和nuxt.js中的区别说明

目录

• vuex状态持久化在vue和nuxt.js的区别
• Vue
• 使用
• Nuxt
• vue的vuex的数据持久化
• 使用插件vuex-persistedstate对数据进行数据的持久化处理
• plugins要是一个一维数组不然会解析错误

vuex状态持久化在vue和nuxt.js的区别

Vue

相信很多人对 vue 中的 vuex 状态持久化已经很熟悉了，使用 vuex-persistedstate 或者 vuex-persist 即可。

这里推荐使用前者，因为 vuex-persist 基于 ts ，webpack 未经配置打包 ts 有问题，而且在 ie 中存在问题。

使用

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

更换 sessionStorage 存储方式：

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [
        persistedState({ storage: window.sessionStorage })
    ]
})

使用 cookie 存储：

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
  // ...
  plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

Nuxt

因为每次请求都自带 cookies ，所以可以在第一次进入页面的 nuxt 服务端初始化方法 nuxtServerInit 中将 cookies 存到 vuex 状态树中。

由于是服务端获取 cookies ，js-cookie 不再适用，需要使用 cookie-universal-nuxt ：

npm install cookie-universal-nuxt

之后在 store/index.js 中：

// 定义行为
const actions = {
    // nuxt提供的，每次发送请求都会先调用此方法 ，并且第1个参数store, 该方法的第2个参数是context
    nuxtServerInit({commit}, {app}) {
        const data = {}
        data.accessToken = app.$cookies.get('accessToken')
        // 更新 vuex 状态树
        commit('UPDATE_ALL_STATE', data)
    }
 }

这里的 app.$cookies.get 是 cookie-universal-nuxt 给我们提供的在服务端获取 cookies 的方法。

他等价于使用 context 中的 req 对象获取 cookie ：req.headers.cookie 之后解析出我们需要的对象值。

那问题来了，既然都有原生 vuex 状态持久化方法了为什么还要用 nuxt 的方法，因为在 created 的时候 window 对象不能使用（包括 cookie 和 loaclStorage），只能在 mounted 使用，于是在页面加载的一瞬间不能加载状态树，导致页面数据反馈变慢，而 nuxt 的策略就可以优化这个问题，十分人性化。

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。