nuxt는 다른 js 파일에store를 사용하는 방식을 실현합니다

앞말
새로 만든 js 파일에서store 안의 데이터를 사용하고 싶습니다. 예를 들어 token은 봉인된axios에서 헤더에 사용하거나 앱의 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 사용자 로그인 상태 지속화 처리 방법:nuxt Server Init 페이지 렌더링 전store 처리
일반적인 vue-cli 프로젝트에서 우리는 사용할 수 있다vuex-persistedstate 이것은 vuex의 상태를 지속시키고 페이지 리셋도 잃어버리지 않습니다. 원리는 당연히 localStorage입니다!
물론 사용할 수도 있죠vue-cookies token을 저장합니다. 그러면 문제가 생겼습니다.nuxt 프로젝트는 로그인 상태를 어떻게 저장합니까?
위의 두 가지 방법은 우리가 모두 사용할 수 있지만 문제가 있다. 왜냐하면created 갈고리에 윈도우 대상(cookie,localStorage를 얻으려면 윈도우 대상이 필요하다)이 존재하지 않기 때문이다. 예를 들어 로그인 상태를 얻으려면 token이 존재하는지 판단할 때 mounted에서만 조작할 수 있기 때문이다. 그러나 이렇게 하면 또 하나의 문제를 일으킬 수 있다. 바로 페이지에 들어가는 순간에도 로그인 상태를 알 수 없고 체험에 영향을 미친다는 것이다.사용자 이름 표시 등 구성 요소 표시 숨김 지연이 존재합니다.
nuxt는 매우 우호적입니다. 이것은 fetch 갈고리와 nuxt Server Init를 제공합니다. 이 두 갈고리는 모두 서버에서 실행되고 우리는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
상태 트리 파일에 nuxt Server Init 방법이 지정되어 있습니다. nuxt Js가 호출할 때 페이지의 context 상하문 대상을 두 번째 매개 변수로 전송하여 서버에서 호출할 수 있도록 합니다. fetch와 마찬가지로context를 포함하지 않습니다.redirect와 context.error 방법, 구체적인 매개 변수를 볼 수 있습니다공식 문서 .
우리가 서비스 측의 일부 데이터를 클라이언트에게 전달하려면 이 가져오기를 통해 상태에 저장하고 클라이언트가 다시 상태에서 꺼내면 된다.
nuxt Server Init: 먼저 token을 쿠키에 저장합니다. 그러면 요청할 때마다 쿠키를 가져옵니다. 그러면 nuxt Server Init의 매개 변수 {req,res}를 이용하여 요청과 함께 있는 쿠키를 가져와서 token을 해석하고 vuex에 저장합니다.
쿠키 플러그인을 사용하는 것을 추천합니다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
루트 인스턴스
클라이언트 & 서버
모든 플러그인을 포함하는 루트 실례입니다.예를 들어 axios를 사용하려면context를 통해 사용할 수 있습니다.app.$axios 가져오기
isClient
Boolean
클라이언트 & 서버
클라이언트에서 렌더링, 폐기 여부,process를 사용하십시오.client
isServer
Boolean
클라이언트 & 서버
서버에서 렌더링, 폐기 여부를 프로세스를 사용하십시오.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
서버
다른 루트로 바꾸는 데 사용됩니다. 상태 코드는 서버에서 사용됩니다. 기본 302redirect ([status,] path [,query])
error
Function
클라이언트 & 서버
오류 페이지로 이동합니다. error(parmas),params는statusCode와message 필드를 포함합니다.
nuxtState
Object
클라이언트
nuxt 상태
beforeNuxtRender(fn)
Function
서버
NUXT가 클라이언트에서 보여주는 변수를 업데이트합니다. 자세한 내용은 홈페이지를 보십시오.
이상의 이nuxt는 다른 js 파일에서store를 사용하는 방식을 실현하는 것이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.