Nuxt.js中让vuex数据持久化,实测管用

首先对百度上搜到解决方案的可用性做下详解

1. vuex-persistedstate配合js-cookie

 地址:nuxt中vuex数据持久化

 可用性:不可用,按照文中的方法配置仍然出现找不到window对象的情况。在配置插件的时候配置了ssr: false,仍然找不到window对象,推测可能是NuxtVuex的版本问题(注:这篇文章是19年12月的)

 

2. nuxtServerInit方法配合cookie-universal-nuxt

 地址:vuex状态持久化在vue和nuxt.js中的区别

 可用性:不可用。会提示$cookies对象为undefined。推测可能是Cookie的设置问题。

3.vuex-persist

  地址:nuxtJS: Persist Vuex State with vuex-persist

   可用性:部分可用,配置完成之后不会出现找不到window对象的情况。此方法在除了asyncData之外的方法中都是可用的,但是asyncData方法中并不能访问到localStorage(因为asyncData方法是在服务端执行的,没有localStorage),所以如果不需要在asyncData中使用Vuex的话可以采用这样的方案。

 

最终方案

 js-cookie配合nuxtServerInit实现Vuex持久化

地址:nuxt刷新页面Vuex失效,在axios中使用vuex【vuex-persist,localStorage,Cookie。三种办法解决】

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

 

步骤一:安装js-cookie

npm install --save js-cookie

步骤二:设置Vuex时同时设置Cookie

设置完成后,用nuxtServerInit 中将 cookies 存到 vuex 状态树中

import { mapMutations } from 'vuex'
import * as Cookies from 'js-cookie'
export default {
  name: '',
  data() {
    return {
        searchConet:''
    }
  },
  methods: {
    ...mapMutations(['getText']),
    enterEvent() {
      this.getText({
        text: this.searchConet ? this.searchConet : ''
      })
      Cookies.set('text', this.searchConet ? this.searchConet : '')
    }
  }
}

 第三步:设置Vuex

          刚刚设置了保存Cookie的逻辑,接下来就需要把Cookie的信息取出来,设置在Vuex中,完成持久化操作。

   nuxtServerInit方法在每次发送请求且请求未到达页面的时候都会被调用,可以借助这个方法来设置Vuex。

export const state = () => ({
  text: '',
  category: ''
});

export const mutations = {
  getText (state, newtext) {
    state.text = newtext.text
  },
};
export const actions = {
  nuxtServerInit ({ commit, store }, { req }) {
    // 切分Cookie
    if (typeof req != undefined && req.headers && req.headers.cookie) {
      let cookie = req.headers.cookie.split(';')
      // 定义字符常量:需要从cookie中取出的值的名称
      const te = 'text='

      // 需要持久化的值
      let text = ''
      // 遍历Cookie,取得需要的值
      cookie.forEach((e) => {
        if (e.includes(te)) {
          text = e.split(te)[1]
        }
      })

      // 提交mutation
      commit('getText', {
        text,
      })
    }
  }
}
export default {
  state,
  mutations,
  actions
};

     注意:nuxtServerInit这是初始化,在微信自带的浏览器需要判断一下,否则会报错

nuxtServerInit ({ commit, store }, { req }) {
    if (typeof req != undefined && req.headers && req.headers.cookie) {
})

到这里就完成了

注:如果你的nuxt项目去掉了window_nuxt,可忽略本文章,经本人测试,去掉后就没办法使用store以及nuxtServerInit

       去掉window_nuxt具体详解请看下篇文章    传送门待开启

上一篇:2021全新Vue全套教程全开源视频教程


下一篇:Nginx部署Nuxt