source

VUEX Store에서 serverMiddleware API로 데이터를 전달하는 방법

factcode 2022. 8. 18. 23:24
반응형

VUEX Store에서 serverMiddleware API로 데이터를 전달하는 방법

Nuxt.js에서 Vuex Store에서 serverMiddleware로 데이터를 전달할 수 있습니까?

  async SET_DATA({commit}, payload) {
    await this.$axios.$post('/api', { data: payload.data})
    commit('SET_DATA', payload.data)
  }

nuxt.config의 경우

  serverMiddleware: [
    { path: '/api', handler: '~/api/index' }
  ]

그럼 api/index.js의 데이터에 어떻게 접근합니까?

export default function (req, res, next) {
  // Get data from Store here

  next()
}

bodyParser에서 문제를 해결했습니다.app.use(bodyParser.json()를 사용합니다.

내가 찾은 유일한 방법은

read File 및 write File 함수.

nuxt.config의 경우

modules: ['~/api/api.js'],

in api/api.js

서버 미들웨어로 인해 앱을 빌드하려고 하면 버그가 발생하기 때문에 이 방법을 사용합니다.

module.exports = function (moduleOptions) {
//Add middleware only with `nuxt dev` or `nuxt start`
var fs = require('fs');

// Save file from env or vuex anything comes with this
fs.writeFile('envTransfer.txt',  JSON.stringify(this.options.env), function (err) {
  if (err) throw err;
  console.log('Saved!');
}); 

// Then call addServermiddleware  
 //Add middleware only with `nuxt dev` or `nuxt start`
if (this.options.dev || this.options._start) { 
  this.addServerMiddleware('~/api/index.js')
}
}

api/index.js 파트(node & express)

const fs        = require('fs');
const express = require('express');
const app = express()
....
let content="";
fs.readFile('envTransfer.txt',  function(err, data) {
if (err) throw err;
content = data; 
var obj = JSON.parse(content);

 // do it what ever you want

app.get('/', (req, res, next) => {
     // res.send('API root')
})

// export the server middleware
    module.exports = {
      path: '/api',
      handler: app
   }
});

언급URL : https://stackoverflow.com/questions/53211809/how-to-pass-data-from-vuex-store-to-servermiddleware-api

반응형