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

时间：2021-03-06 10:12:18|栏目：vue|点击：次

前言

在新建的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在客户端呈现的变量,具体了解请看官网

上一篇：Vue 父子组件、组件间通信

栏目：vue

下一篇：vue实现移动端拖动排序

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

本文地址：http://www.codeinn.net/misctech/75390.html

更多vue

vue

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

阅读排行

推荐教程