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

2024-11-29 00:15:22

前言

在新建的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的方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

nuxt 自定义 auth 中间件实现令牌的持久化操作

核心点就是在process.server下,把之前存在 cookie 中的数据再用store.commit一下 auth.js /* eslint-disable no-unused-vars */ /* eslint-disable no-useless-return */ export const TokenKey = 'Admin-token' /** * 解析服务端拿到的cookie * @param {*} cookie * @param {*} key */ export funct
解决Nuxt使用axios跨域问题

Nuxt 是 Vue 项目服务器端渲染(SSR)解决方案.而在使用时,就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题.本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题. 解决跨域 Nuxt 使用 axios 为避免出现前端页面跨域问题,需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块. 用 yarn 安装: yarn add axios @nuxtjs/axios @nuxtjs/proxy 使用 npm 安装: npm insta
Nuxt默认模板、默认布局和自定义错误页面的实现

一.默认模板和默认布局通常用于一些有固定格式的网站比如一些网站的头部和底部都是一样的此时即可使用默认模板默认模板在项目的根目录下创建一个名为app.html的文件 Nuxt即可自动将其识别为默认模板: 用法和字符串拼接有点类似可将{{HEAD}}视为头部内容将{{APP}}视为页面主体内容 (HEAD和APP都需大写) <!DOCTYPE html> <html lang="en"> <head> {{HEAD}} </head&
解决nuxt 自定义全局方法,全局属性,全局变量的问题

注意 ,这个在 asyncData 还是不能用的 ,在mounted等其他生命周期里面可以, asyncData 里因为获取不到this他在组件初始化前执行的,如果找到方法我会继续更新到下一篇博客好现在说步骤,在plugins 文件夹里新增一个 commom.js名字你自己取 commom.js 测试代码 import Vue from 'vue' var comsys= { install(Vue){ Vue.prototype.comsys = { val:function(val){
Nuxt配置Element-UI按需引入的操作方法

Nuxt 使用 create-nuxt-app 创建项目时,选择使用 Element-UI 为默认组件库,发现 Nuxt 没有开启 Element-UI 的按需引入配置,需要自行配置. 安装依赖在 create-nuxt-app 中没有选择 Element-UI 的先安装. npm install element-ui --save 或者 yarn add element-ui Element-UI 开启按需引入,必须安装 babel-plugin-component 插件. npm inst
基于Vue.js+Nuxt开发自定义弹出层组件

今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种组件式及函数式调用插件. 组件式 <templat
nuxt+axios实现打包后动态修改请求地址的方法

需求:把请求地址等一些配置暴露出来以便打包后动态修改,而不需要重新打包编译. 这样也是挺不错的,当一个项目需要部署到几个不同的服务器上时候,就不用说每次都要修改后再重新打包.功能不变时,单单是修改一下请求地址省了不少功夫. 1.开始把需要动态修改的配置写在一个配置json文件里面.该配置文件可以放在static目录下: 静态文件目录:静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理. 服务器启动的时候,该目录下的文件会映
nuxt 实现在其它js文件中使用store的方式

前言在新建的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 的地方 imp
vue在.js文件中引入store和router问题

目录在.js文件中引入store和router 在js文件中使用vue的router和store 总结在.js文件中引入store和router 在js文件中使用vue的router和store 在js文件中引入vue的路由配置文件或者 store文件 import store from '../store'; import router from '../router'; //直接使用即可 router.push({'path': '/'}) store.state.XXX; 总结以
js文件中直接alert()中文出来的是乱码的解决方法

解决方法如下: 在这句语句上面加上echo "<meta http-equiv='Content-Type'' content='text/html; charset=utf-8'>"; 以上就是小编为大家带来的js文件中直接alert()中文出来的是乱码的解决方法全部内容了,希望大家多多支持我们~
thinkPHP js文件中U方法不被解析问题的解决方法

本文实例分析了thinkPHP js文件中U方法不被解析问题.分享给大家供大家参考,具体如下: 我想在js文件中写ajax, 写完发现异常, 本以为是js文件中不支持ajax 后来发现时地址解析错误. 也就是U方法在js文件中不被解析. 貌似thinkphp解析,tpl文件中的一些元素. js文件中的ajax function ajaxCheckTel(tel,id){ var res = ''; $.ajax({ type:"post", url:ajaxurl, // 地址解析有误
在js文件中写el表达式取不到值的原因及解决方法

今天在js文件中,写el表达式取不到值(代码如下),百度一翻,现总结如下: 1.javascript是客户端执行,EL是在服务端执行,而服务端比客户端先执行,所以取不到值 2.要想获取"${isLogin}"的值,可以在jsp中,用一个全局变量接收,然后再js中使用 3.注意:在使用时,注意要添加双引号,如var isLogin="${isLogin}"; 复制代码代码如下: $(function(){ var isLogin="${isLogin}&q
从外部的js文件中获取ASPX页面的控件ClientID

前言当使用MasterPage.UserControl等容器时,为了避免控件的重复命名,asp.net会自动将容器中的控件生成一个ClientID(Control Tree中的可生成,否则不会生成). 例如:ContentPlaceHolder1中的Button1默认情况下会生成"ctl00_ContentPlaceHolder1_Button1"的ClientID. 我们在Render出来的mark up中看到的也是这些ClientID.所以,当我们使用JavaScript对控件元
在js文件中如何获取basePath处理js路径问题

js路径的问题有时候不好处理,在jsp中,我们可以用el表达式直接获取basePath,但是在单独js文件中不能用el表达式,又不想在jsp中单独的写个变量,可以用以下方法: 复制代码代码如下: var location = (window.location+'').split('/'); var basePath = location[0]+'//'+location[2]+'/'+location[3]; var url = basePath + '/js/xxx.js';
jQuery在vs2008及js文件中的无智能提示的解决方法

jQuery在vs2008中的智能提示 1 安装VS2008SP1补丁要确保您的vs2008已经打了sp1补丁,在vs2008的帮助里的关于,要是安装了sp1,会出现"版本 3.5 sp1",没安装当然就只有"版本 3.5". 如果没有安装可以在这下载sp1. 2 安装VS 2008 Patch KB958502以支持"-vsdoc.js"Intellisense文件.该补丁会导致Visual Studio在一个JavaScript库被引用
JS文件中加载jquery.js的实例代码

本文表述了JS文件中加载jquery.js的方法,具有很好的参考价值,希望对大家有所帮助. 最近有一个需求: 1.在一个html中只能引入一个JS文件不能有JS代码和其他JS文件的引入: 2.这个JS文件中还要引入其他的JS文件: 3.所有JS功能都写在这个JS文件中这些代码用到了jquery相关的东东所以这里第一个需要解决的就是怎么引入jquery.js. 在网上搜索了很多方法都不太实用,由于我自己离开WEB多年最后向朋友询问得到以下代码: 1.js // by firefoxmmx
vue项目中在外部js文件中直接调用vue实例的方法比如说this

一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app

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

相关推荐

随机推荐