nuxt 实现在其它js文件中使用store的方式
前言
在新建的js文件中想用store里面的数据，比如token想在封装的axios里面，请求头里面去使用，亦或者通过app的JS接口获取token并存储在store里面。
我们都知道如何在vue中如何使用。
代码
/*
*@Description:
*@Author:lxc
*@Date:2019-07-0216:14:07
*@LastEditTime:2019-08-1416:08:19
*@LastEditors:lxc
*/
//导出store的地方
importVuefrom'vue'
importVuexfrom'vuex'
importstatefrom'./state'
importactionsfrom'./actions'
importmutationsfrom'./mutations'
importgettersfrom'./getters'
importcanteenfrom'./modules/canteen'
importcontactfrom'./modules/contact'
importhealthfrom'./modules/health'
importscanfrom'./modules/scan'
Vue.use(Vuex)
letstore
constinitStore=()=>{
returnstore||(store=newVuex.Store({
//存放公用数据
state,
//异步操作要通过actions，否则通过cimmit直接操作mutations
actions,
//同步放数据
mutations,
getters,
modules:{
//store模块....
}
}))
}
exportdefaultinitStore
其它js文件中如何调用：
importstorefrom'@/store'
constTOKEN='testToken'
//这里只是举个例子
functiongetToken(){
returnisNotEmpty(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方法，它会在组件每次加载前被调用（在服务端或切换至目标路由之前），此方法需要跟服务端的人员配合
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
context上下文对象：
| 属性 | 类型 | 可用 | 描述 |
|---|---|---|---|
| app | vue根实例 | 客户端&服务端 | 包含所有插件的根实例。例如:想使用axios，可以通过context.app.$axios获取 |
| isClient | Boolean | 客户端&服务端 | 是否来自客户端渲染，废弃，请使用process.client |
| isServer | Boolean | 客户端&服务端 | 是否来自服务端渲染，废弃，请使用process.server |
| isStatic | Boolean | 客户端&服务端 | 是否通过nuxtgenerate |
| isDev | Boolean | 客户端&服务端 | 是否开发模式，在生产坏境的数据缓存中用到 |
| isHMR | Boolean | 客户端&服务端 | 是否通过模块热替换，仅在客户端以dev模式 |
| route | 路由 | 客户端&服务端 | 路由实例 |
| store | vuex数据 | 客户端&服务端 | Vuex.sttore实例 |
| env | lObject | 客户端&服务端 | nuxt.config.js中的环境变量 |
| params | Object | 客户端&服务端 | route.params的别名 |
| query | Object | 客户端&服务端 | route.query的别名 |
| req | http.Request | 服务端 | Node.jsAPI的Request对象。如果nuxt以中间件形式使用的话，这个对象就根据你所使用的框架（个人理解为页面）而定。nuxtgenerate不可用 |
| res | http.Reponse | 服务端 | Node.jsAPI的Reponse对象。如果nuxt以中间件形式使用的话，这个对象就根据你所使用的框架（个人理解为页面）而定。nuxtgenerate不可用 |
| redirect | Function | 服务端 | 用于重定向另一个路由，状态码在服务端被使用，默认302redirect([status,]path[,query]) |
| error | Function | 客户端&服务端 | 前往错误页面，error(parmas),params包含statusCode和message字段 |
| nuxtState | Object | 客户端 | nuxt状态 |
| beforeNuxtRender（fn） | Function | 服务端 | 更新NUXT在客户端呈现的变量,具体了解请看官网 |
以上这篇nuxt实现在其它js文件中使用store的方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。