服务端渲染,nuxt的使用体验

续上回,点这直达链接,做了一个二维码生成工具。
一顿操作猛如虎,一看百度收录。。。
众所周知,VUE单页程序对搜索引擎收录是很不友好的。经朋友推荐,了解了nuxt,然后就开始了我的趟坑之旅。

这是经nuxt改造后的新版版,UI这块基本没设计,大佬们请无视,还有一些bug没处理,先不管了,能跑就行:sweat_smile:

总的使用下来还行。

服务端渲染,nuxt的使用体验

以下是一些趟坑已经解决了的。

  • nuxt 分为客户端和服务端,代码会执行两次,一次在服务端,一次在客户端浏览器,这里就需要对使用了window对象,cookie,localstorage等,需要进行判断 if(process.client) 防止报错。
  • 账号的登陆状态,我目前是这样处理的,在客户端时将token存到cookie 页面刷新时,服务端在中间件中,将请求头中获取token,保存到vuex,服务端渲染后,再返给浏览器。
  • laravel-echo 这部分,也是报window不存在,这部分就新建个插件,只让在客户端执行即可。

以下是我未解决的问题,请前端的朋友指教一下:

我们平时在普通的应用里是这样使用vuex的,但是在nuxt中,不推荐这样写,/store文件夹下,新建一个js,框架就自动导入了。nuxt store

这个是vue的
store/
├── getters.js
├── index.js
└── module
    ├── app.js
    ├── globalDictionary.js
    └── user.js
nuxt下的
store/
├── dictionary.js
├── getters.js
├── README.md
└── user.js

所以这就导致一个问题,在其他的封装js文件里面就无法导入store了

import axios from 'axios';
import store from '@/store'

service.interceptors.request.use(
    config => {
        if (process.client) {
            if (getters.token) {
                // 普通应用中,是这样的
                config.headers['Authorization'] = 'Bearer ' + store.getters.token
            }
        }
        return config;
    }
);
nuxt 推荐这样使用,

//plugin/plugin.js
export default function ({store}, inject) {
//这里能获取到store
}

// nuxt.config.js 这注册插件
plugins: [
    '@/plugins/plugin.js',
  ]

所以请问下如何像在普通vue项目那样,在js文件中使用store:sweat_smile:

讨论数量: 1

目前还没有线上业务使过 Nuxt,但正如你发的文档里边说的 mapMutationsthis.$store 都能正常使用的吧 :smile:

3年前 评论
鲜橙多 (楼主) 3年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!