如何從 Node.js 訪問 Vuex 商店？

Question

我必須從服務器訪問 state。 從中弄清楚后，我想用突變更改twitterName 。 我設置了一個吸氣劑，但是當我嘗試將商店導入 js 文件時，它會發送錯誤。 如何導入 state？

服務器/index.js

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const path = require('path')

const app = express()
app.use(bodyParser.json())
app.use(cors())

const tweets = require('./routes/api/tweets')
const twitterName = require('./routes/api/name')

app.use('/api/tweets', tweets)
app.use('/name/', twitterName)

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(__dirname + '/public/'))
  app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'))
}

const port = process.env.PORT || 8081

app.listen(port, () => console.log(`Server started on port ${port}`))

服務器/名稱.js

const express = require('express')
const router = express.Router()

router.get('/:twitterName', (req, res) => {
  const name = req.params.twitterName
  res.status(200).send(name)
})

module.exports = router

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    twitterName: 'name1234'
  },
  
  getters: {
    twitterName: (state) => state.twitterName
  }
  
  actions: {
    updateId({ commit }, id) {
      commit('setId', id)
    },
    async getTweetData({ state }) {
      const res = await axios.get('http://localhost:8081/name/' + state.twitterName)
      // do what you want with the data
    }
  },
})

Answer 1

您不能在快速服務器中使用客戶端的存儲，原因很簡單，應用程序客戶端使用的所有數據（包括 vuex 存儲）都保存在瀏覽器中，而您在服務器。 這不是實現目標的正確方法。

如果您想使用來自客戶端的數據，您需要將其發送到您的服務器，這樣您就可以在那里使用它。 因此，如果您特別需要twitterName ，您可以執行以下操作：

router.get('/tweets/:twitterName', (req, res) => {
  // const name = 'name123'
  const name = req.params.twitterName
  T.get(
    'search/tweets',
    { from: name, count: 5 },
    function (err, data, response) {
      if (err) {
        return res.status(400).json('Oops! Something went wrong.')
      }
      data.twitterName = '<new-name>'
      res.status(200).send(data)
    }
  )
})

從 vuejs 商店：

actions: {
   async getTweetData({ state, commit }) {
       const res = await axios.get('<your-server-ip>/' + state.twitterName)
       commit('setTwitterName', res.data.twitterName)
   } 
},
mutations: {
   setTwitterName(state, newTwitterName) {
       state.twitterName = newTwitterName
   }
}