nuxt 实现在其它js文件中使用store的方式


Posted in Javascript onNovember 05, 2020

前言

在新建的js文件中想用store里面的数据,比如token想在封装的axios里面,请求头里面去使用,亦或者通过app的JS接口获取token并存储在store里面。

我们都知道如何在vue中如何使用。

代码

/*
 * @Description: 
 * @Author: lxc
 * @Date: 2019-07-02 16:14:07
 * @LastEditTime: 2019-08-14 16:08:19
 * @LastEditors: lxc
 */
// 导出 store 的地方

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
import canteen from './modules/canteen'
import contact from './modules/contact'
import health from './modules/health'
import scan from './modules/scan'

Vue.use(Vuex)

let store
const initStore = () => {
 return store || (store = new Vuex.Store({
 // 存放公用数据
 state,
 // 异步操作要通过actions,否则通过cimmit直接操作mutations
 actions,
 // 同步放数据
 mutations,
 getters,
 modules: {
  // store 模块....
 }
 }))
}
export default initStore

其它js文件中如何调用:

import store from '@/store'
const TOKEN = 'testToken'

// 这里只是举个例子
function getToken() {
 return isNotEmpty(store().state.token) ? store().state.token : TOKEN
}

我自己使用是可以的。希望对大家有帮助。

补充知识:nuxt如何处理用户登录状态持久化:nuxtServerInit 页面渲染前的store处理

在一般的vue-cli项目中,我们可以用vuex-persistedstate,它可以使vuex的状态持久化,页面刷新都不会丢失,原理当然是localStorage啦!

当然也可以使用vue-cookies进行保存token,那么问题来了,nuxt项目怎么保存登录状态呢?

虽然上面这两种方法我们都可以使用,但是有个问题,由于在created钩子中不存在window对象(获取cookie、localStorage都需要window对象),比如想要获取登录状态即判断是否存在token时,只能在mounted中进行操作,但这样又会引发一个问题,就是进页面的一瞬间还是无法得知登录状态,体验上会有影响,会存在显示用户名等组件显示隐藏延迟。

nuxt非常友好,它提供了fetch钩子,还有nuxtServerInit,这两个钩子都运行在服务端并且我们能很快速地操作store

1、fetch的使用

如果页面组件设置了fetch方法,它会在组件每次加载前被调用(在服务端或切换至目标路由之前),此方法需要跟服务端的人员配合

<script>
export default {
 async fetch ({ app, store, params }) {
 let { res } = app.$axios.get('/token');
 store.commit('setToken', res.data.token);
 }
}
</script>

2、nuxtServerInit

状态树文件中指定了nuxtServerInit方法,nuxtJs调用它的时候会将页面的context上下文对象作为第2个参数传给它以供服务端调用,与fetch一样,不包括context.redirect和context.error方法,具体哪些参数可以查看官方文档。

当我们想要将服务端的一些数据传到客户端,可以通过这个获取保存在状态中,客户端再从状态里取出来就好了。

nuxtServerInit:先把token存入cookie,这样每次请求都会自带cookie,那么利用nuxtServerInit里的参数 {req, res},去获取到请求附带的cookie,然后解析出token,然后再存入vuex。

推荐使用cookie插件cookie-universal-nuxt

<script>
import Vuex from 'vuex'
 
let store = () => new Vuex.Store({
 state: {
 token: ''
 },
 mutations: {
 setToken (state, token) {
  state.token = token
 }
 },
 actions: {
 nuxtServerInit({ commit }, { req }) {
  let cookie = req.headers.cookie;
 
  // 将cookie转成json对象(自己实现该方法)
  let token = cookieparse(cookie).token;
  commit('setToken', token);
 },
 }
})
 
export default store
</script>

context上下文对象:

属性 类型 可用 描述
app vue根实例 客户端 & 服务端 包含所有插件的根实例。例如:想使用axios,可以通过context.app.$axios获取
isClient Boolean 客户端 & 服务端 是否来自客户端渲染,废弃,请使用process.client
isServer Boolean 客户端 & 服务端 是否来自服务端渲染,废弃,请使用process.server
isStatic Boolean 客户端 & 服务端 是否通过nuxt generate
isDev Boolean 客户端 & 服务端 是否开发模式,在生产坏境的数据缓存中用到
isHMR Boolean 客户端 & 服务端 是否通过模块热替换,仅在客户端以dev模式
route 路由 客户端 & 服务端 路由实例
store vuex数据 客户端 & 服务端 Vuex.sttore实例
env l Object 客户端 & 服务端 nuxt.config.js中的环境变量
params Object 客户端 & 服务端 route.params的别名
query Object 客户端 & 服务端 route.query的别名
req http.Request 服务端 Node.js API的Request对象。如果nuxt以中间件形式使用的话,这个对象就根据你所使用的框架(个人理解为页面)而定。nuxt generate 不可用
res http.Reponse 服务端 Node.js API的Reponse对象。如果nuxt以中间件形式使用的话,这个对象就根据你所使用的框架(个人理解为页面)而定。nuxt generate 不可用
redirect Function 服务端 用于重定向另一个路由,状态码在服务端被使用,默认302 redirect([status,]path[,query])
error Function 客户端 & 服务端 前往错误页面,error(parmas),params包含statusCode和message字段
nuxtState Object 客户端 nuxt状态
beforeNuxtRender(fn) Function 服务端 更新NUXT在客户端呈现的变量,具体了解请看官网

以上这篇nuxt 实现在其它js文件中使用store的方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
js实现导航吸顶效果
Feb 24 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 #Javascript
vue实现点击出现操作弹出框的示例
Nov 05 #Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 #Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 #Javascript
前端vue如何使用高德地图
Nov 05 #Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 #Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 #Javascript
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP高级OOP技术演示
2009/08/27 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
收集的几个Python小技巧分享
2014/11/22 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python妹子图简单爬虫实例
2015/07/07 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Python列表解析操作实例总结
2020/02/26 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
Pycharm github配置实现过程图解
2020/10/13 Python
python mock测试的示例
2020/10/19 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
史学专业毕业生求职信
2014/05/09 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
汽车销售员工作总结
2015/08/12 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android