main.js

/*
 * main.js
 *
 * Initial entry point for all Vue and component code
 */

import Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App.vue'
import './sockets.js'

Vue.use(VueResource)

new Vue({
  el: '#app',
  render: element => element(App)
})

sockets.js

import App from './App.vue'

const socket = io('http://localhost:8181')

socket.on('test', payload => App.$set('test', payload))

/*socket.on('lot_change', payload => {
  console.log(payload)
  //Logic to find differences and reset
})*/

App.vue

<template>
  <div id="app">
    {{ test }}
    <template v-for="lot in allLots">
      <lot
        :uuid="lot.uuid"
        :closed="lot.closed"
        :controllerId="lot.controllerId"
        :institution="lot.institution"
        :number="lot.lotNumber"
        :permits="lot.permits"
        :taken-spaces="lot.takenSpaces"
        :total-spaces="lot.totalSpaces"></lot>
    </template>
  </div>
</template>

<script>
import Lot from './components/Lot.vue'

export default {
  data() {
    return {
      allLots: [],
      test: {}
    }
  },

  components: {
    Lot
  },

  created() {
    this.$http.get('/all').then(res => JSON.parse(res.body)).then(data => {
      this.allLots = data.results
    })
  }
}
</script>

<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

在新连接上，我的express应用程序向套接字发出'test'事件，客户端套接字完全正常接收，但是，我想要做的是从后面获取有效负载-end socket的发射并将其分配给App组件的数据。

在socket.on('test')的回调中，我目前收到undefined function的{{1}}类错误。我还使用App.$set尝试了全局API，但也没有用。

非常感谢任何帮助！

修改

换句话说，如何在导入后从另一个JS文件中操作单个文件组件的Vue.set(App, 'test', payload)对象？

Answer 1

尝试使用Vuex

看起来您应该考虑使用Vuex，即使看起来很长也很容易设置。

这将是Vuex商店文件的基本示例：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    allLots: []
  },
  getters: {
    lots: state => {
      return state.allLots
    }
  },
  mutations: {
    setAllLots (state, lots) {
      state.allLots = lots
    }
  },
  actions: {
    setAllLots ({ commit }, lots) {
      commit('setAllLots', lots)
    }
  }
})

在main.js文件中：

import store as './your-path/store'

并在下面更新：

new Vue({
  el: '#app',
  store,
  render: element => element(App)
})

这会为您的vue实例设置vuex。现在，您必须通过在请求中调用商店的调度函数来更新vuex中的allLots数据，以便在App.vue中获得批量...

将商店导入App.vue，类似于您在main.js中的操作，并更新此代码：

created() {
    this.$http.get('/all').then(res => JSON.parse(res.body)).then(data => {
      store.dispatch('setAllLots', data.results)
    })
  }

这样做会发送data.results作为商店操作中的lots参数：setAllLots

...将lots参数提交到商店的变种：setAllLots

...使用allLots参数

更新您的lots数据

现在vuex已更新，您可以使用lots getter导入商店的任何位置检索此信息。

所以要在App.vue中获取它，请使用计算属性（替换返回数据中的allLots），如下所示：

computed: {
  allLots () {
    return store.getters.lots
  }
}

您的allLots现在将从计算属性呈现在您的模板中。

我对此的第一反应是不正确的，因为我最初误解了您的问题，但意识到这仍然有用。

尝试再次导入store并致电：

socket.on('test', payload => store.dispatch('setAllLots', payload))

假设您的套接字代码是正确的，这应该适用于您，因为设置了vuex并且您的计算属性是被动的。我没有测试这最后一部分，所以我希望这可以帮助你！

无论如何，我希望这可以帮助您或任何快速设置Vuex的人。

设置外部Vue组件的数据

main.js

sockets.js

App.vue

修改

1 个答案:

尝试使用Vuex