服务端渲染,nuxt的使用体验
续上回,点这直达链接,做了一个二维码生成工具。
一顿操作猛如虎,一看百度收录。。。
众所周知,VUE单页程序对搜索引擎收录是很不友好的。经朋友推荐,了解了nuxt,然后就开始了我的趟坑之旅。
这是经nuxt改造后的新版版,UI这块基本没设计,大佬们请无视,还有一些bug没处理,先不管了,能跑就行
总的使用下来还行。
以下是一些趟坑已经解决了的。
- 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
目前还没有线上业务使过 Nuxt,但正如你发的文档里边说的
mapMutations
和this.$store
都能正常使用的吧 :smile: