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 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
Django框架中的对象列表视图使用示例
2015/07/21 Python
详解Python中的动态属性和特性
2018/04/07 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
设计总监岗位职责
2013/12/07 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年度党员个人总结
2015/02/14 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android