nuxt 實現(xiàn)在其它js文件中使用store的方式

更新時間：2020年11月05日 10:09:32 作者：Zz_糖小七

這篇文章主要介紹了nuxt 實現(xiàn)在其它js文件中使用store的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

前言

在新建的js文件中想用store里面的數(shù)據(jù)，比如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
 */
// 導(dǎo)出 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({
 // 存放公用數(shù)據(jù)
 state,
 // 異步操作要通過actions，否則通過cimmit直接操作mutations
 actions,
 // 同步放數(shù)據(jù)
 mutations,
 getters,
 modules: {
  // store 模塊....
 }
 }))
}
export default initStore

其它js文件中如何調(diào)用：

import store from '@/store'
const TOKEN = 'testToken'

// 這里只是舉個例子
function getToken() {
 return isNotEmpty(store().state.token) ? store().state.token : TOKEN
}

我自己使用是可以的。希望對大家有幫助。

補(bǔ)充知識：nuxt如何處理用戶登錄狀態(tài)持久化：nuxtServerInit 頁面渲染前的store處理

在一般的vue-cli項目中，我們可以用vuex-persistedstate，它可以使vuex的狀態(tài)持久化，頁面刷新都不會丟失，原理當(dāng)然是localStorage啦！

當(dāng)然也可以使用vue-cookies進(jìn)行保存token，那么問題來了，nuxt項目怎么保存登錄狀態(tài)呢？

雖然上面這兩種方法我們都可以使用，但是有個問題，由于在created鉤子中不存在window對象(獲取cookie、localStorage都需要window對象)，比如想要獲取登錄狀態(tài)即判斷是否存在token時，只能在mounted中進(jìn)行操作，但這樣又會引發(fā)一個問題，就是進(jìn)頁面的一瞬間還是無法得知登錄狀態(tài)，體驗上會有影響，會存在顯示用戶名等組件顯示隱藏延遲。

nuxt非常友好，它提供了fetch鉤子，還有nuxtServerInit，這兩個鉤子都運(yùn)行在服務(wù)端并且我們能很快速地操作store

1、fetch的使用

如果頁面組件設(shè)置了fetch方法，它會在組件每次加載前被調(diào)用（在服務(wù)端或切換至目標(biāo)路由之前），此方法需要跟服務(wù)端的人員配合

<script>
export default {
 async fetch ({ app, store, params }) {
 let { res } = app.$axios.get('/token');
 store.commit('setToken', res.data.token);
 }
}
</script>

2、nuxtServerInit

狀態(tài)樹文件中指定了nuxtServerInit方法，nuxtJs調(diào)用它的時候會將頁面的context上下文對象作為第2個參數(shù)傳給它以供服務(wù)端調(diào)用，與fetch一樣，不包括context.redirect和context.error方法，具體哪些參數(shù)可以查看官方文檔。

當(dāng)我們想要將服務(wù)端的一些數(shù)據(jù)傳到客戶端，可以通過這個獲取保存在狀態(tài)中，客戶端再從狀態(tài)里取出來就好了。

nuxtServerInit：先把token存入cookie，這樣每次請求都會自帶cookie，那么利用nuxtServerInit里的參數(shù) {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轉(zhuǎn)成json對象（自己實現(xiàn)該方法）
  let token = cookieparse(cookie).token;
  commit('setToken', token);
 },
 }
})
 
export default store
</script>

context上下文對象：

屬性	類型	可用	描述
app	vue根實例	客戶端 & 服務(wù)端	包含所有插件的根實例。例如:想使用axios，可以通過context.app.$axios獲取
isClient	Boolean	客戶端 & 服務(wù)端	是否來自客戶端渲染，廢棄，請使用process.client
isServer	Boolean	客戶端 & 服務(wù)端	是否來自服務(wù)端渲染，廢棄，請使用process.server
isStatic	Boolean	客戶端 & 服務(wù)端	是否通過nuxt generate
isDev	Boolean	客戶端 & 服務(wù)端	是否開發(fā)模式，在生產(chǎn)壞境的數(shù)據(jù)緩存中用到
isHMR	Boolean	客戶端 & 服務(wù)端	是否通過模塊熱替換，僅在客戶端以dev模式
route	路由	客戶端 & 服務(wù)端	路由實例
store	vuex數(shù)據(jù)	客戶端 & 服務(wù)端	Vuex.sttore實例
env	l Object	客戶端 & 服務(wù)端	nuxt.config.js中的環(huán)境變量
params	Object	客戶端 & 服務(wù)端	route.params的別名
query	Object	客戶端 & 服務(wù)端	route.query的別名
req	http.Request	服務(wù)端	Node.js API的Request對象。如果nuxt以中間件形式使用的話，這個對象就根據(jù)你所使用的框架（個人理解為頁面）而定。nuxt generate 不可用
res	http.Reponse	服務(wù)端	Node.js API的Reponse對象。如果nuxt以中間件形式使用的話，這個對象就根據(jù)你所使用的框架（個人理解為頁面）而定。nuxt generate 不可用
redirect	Function	服務(wù)端	用于重定向另一個路由，狀態(tài)碼在服務(wù)端被使用，默認(rèn)302 redirect([status,]path[,query])
error	Function	客戶端 & 服務(wù)端	前往錯誤頁面，error(parmas),params包含statusCode和message字段
nuxtState	Object	客戶端	nuxt狀態(tài)
beforeNuxtRender（fn）	Function	服務(wù)端	更新NUXT在客戶端呈現(xiàn)的變量,具體了解請看官網(wǎng)