nuxt 實(shí)現(xiàn)在其它js文件中使用store的方式
前言
在新建的js文件中想用store里面的數(shù)據(jù),比如token想在封裝的axios里面,請求頭里面去使用,亦或者通過app的JS接口獲取token并存儲(chǔ)在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'
// 這里只是舉個(gè)例子
function getToken() {
return isNotEmpty(store().state.token) ? store().state.token : TOKEN
}
我自己使用是可以的。希望對大家有幫助。
補(bǔ)充知識:nuxt如何處理用戶登錄狀態(tài)持久化:nuxtServerInit 頁面渲染前的store處理
在一般的vue-cli項(xiàng)目中,我們可以用vuex-persistedstate,它可以使vuex的狀態(tài)持久化,頁面刷新都不會(huì)丟失,原理當(dāng)然是localStorage啦!
當(dāng)然也可以使用vue-cookies進(jìn)行保存token,那么問題來了,nuxt項(xiàng)目怎么保存登錄狀態(tài)呢?
雖然上面這兩種方法我們都可以使用,但是有個(gè)問題,由于在created鉤子中不存在window對象(獲取cookie、localStorage都需要window對象),比如想要獲取登錄狀態(tài)即判斷是否存在token時(shí),只能在mounted中進(jìn)行操作,但這樣又會(huì)引發(fā)一個(gè)問題,就是進(jìn)頁面的一瞬間還是無法得知登錄狀態(tài),體驗(yàn)上會(huì)有影響,會(huì)存在顯示用戶名等組件顯示隱藏延遲。
nuxt非常友好,它提供了fetch鉤子,還有nuxtServerInit,這兩個(gè)鉤子都運(yùn)行在服務(wù)端并且我們能很快速地操作store
1、fetch的使用
如果頁面組件設(shè)置了fetch方法,它會(huì)在組件每次加載前被調(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)用它的時(shí)候會(huì)將頁面的context上下文對象作為第2個(gè)參數(shù)傳給它以供服務(wù)端調(diào)用,與fetch一樣,不包括context.redirect和context.error方法,具體哪些參數(shù)可以查看官方文檔。
當(dāng)我們想要將服務(wù)端的一些數(shù)據(jù)傳到客戶端,可以通過這個(gè)獲取保存在狀態(tài)中,客戶端再從狀態(tài)里取出來就好了。
nuxtServerInit:先把token存入cookie,這樣每次請求都會(huì)自帶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對象(自己實(shí)現(xiàn)該方法)
let token = cookieparse(cookie).token;
commit('setToken', token);
},
}
})
export default store
</script>
context上下文對象:
| 屬性 | 類型 | 可用 | 描述 |
|---|---|---|---|
| app | vue根實(shí)例 | 客戶端 & 服務(wù)端 | 包含所有插件的根實(shí)例。例如:想使用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ù)端 | 路由實(shí)例 |
| store | vuex數(shù)據(jù) | 客戶端 & 服務(wù)端 | Vuex.sttore實(shí)例 |
| 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以中間件形式使用的話,這個(gè)對象就根據(jù)你所使用的框架(個(gè)人理解為頁面)而定。nuxt generate 不可用 |
| res | http.Reponse | 服務(wù)端 | Node.js API的Reponse對象。如果nuxt以中間件形式使用的話,這個(gè)對象就根據(jù)你所使用的框架(個(gè)人理解為頁面)而定。nuxt generate 不可用 |
| redirect | Function | 服務(wù)端 | 用于重定向另一個(gè)路由,狀態(tài)碼在服務(wù)端被使用,默認(rèn)302 redirect([status,]path[,query]) |
| error | Function | 客戶端 & 服務(wù)端 | 前往錯(cuò)誤頁面,error(parmas),params包含statusCode和message字段 |
| nuxtState | Object | 客戶端 | nuxt狀態(tài) |
| beforeNuxtRender(fn) | Function | 服務(wù)端 | 更新NUXT在客戶端呈現(xiàn)的變量,具體了解請看官網(wǎng) |
以上這篇nuxt 實(shí)現(xiàn)在其它js文件中使用store的方式就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js實(shí)現(xiàn)開關(guān)(switch)組件實(shí)例代碼
這篇文章介紹了vue.js實(shí)現(xiàn)開關(guān)(switch)組件的實(shí)例代碼,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06
Vue.js 應(yīng)用性能優(yōu)化分析+解決方案
這篇文章主要介紹了Vue.js 應(yīng)用性能優(yōu)化分析以及解決方案,VueJS 是開發(fā)網(wǎng)站最受歡迎、最穩(wěn)定的 JavaScript 框架,但與其他框架一樣,如果您忽略它,性能就會(huì)受到影響,下面我們就一起來看看怎么才能讓性能提升吧2021-12-12
vue實(shí)現(xiàn)把頁面導(dǎo)出成word文件的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)把頁面導(dǎo)出成word文件的方法,文中的實(shí)現(xiàn)步驟講解詳細(xì),并且有詳細(xì)的代碼示例,需要的小伙伴可以參考一下2023-10-10
vue滾動(dòng)插件better-scroll使用詳解
這篇文章主要為大家詳細(xì)介紹了vue滾動(dòng)插件better-scroll,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10
ant design vue中日期選擇框混合時(shí)間選擇器的用法說明
這篇文章主要介紹了ant design vue中日期選擇框混合時(shí)間選擇器的用法說明,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10

