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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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 柱状图实现代码
2009/12/04 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
vue webpack实用技巧总结
2018/04/24 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
django加载本地html的方法
2018/05/27 Python
python3实现猜数字游戏
2020/12/07 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python中的列表与元组的使用
2019/08/08 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
详解Django CAS 解决方案
2019/10/30 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
10个示例带你掌握python中的元组
2020/11/23 Python
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
个人找工作的自我评价
2013/10/17 职场文书
幼师个人总结范文
2015/02/28 职场文书