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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Nuxt.js中让vuex数据持久化，实测管用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2750字，纯文字阅读大概需要4分钟。

内容图文

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

1. vuex-persistedstate配合js-cookie

?地址:nuxt中vuex数据持久化

?可用性：不可用，按照文中的方法配置仍然出现找不到window对象的情况。在配置插件的时候配置了ssr: false，仍然找不到window对象，推测可能是Nuxt或Vuex的版本问题（注：这篇文章是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具体详解请看下篇文章    传送门待开启

内容总结

以上是互联网集市为您收集整理的Nuxt.js中让vuex数据持久化，实测管用全部内容，希望文章能够帮你解决Nuxt.js中让vuex数据持久化，实测管用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---