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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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脚本的10个技巧(5)
2006/10/09 PHP
支持oicq头像的留言簿(二)
2006/10/09 PHP
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python创建字典的八种方式
2019/02/27 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
远程教育学习心得体会
2016/01/23 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
Python字典的基础操作
2021/11/01 Python
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers