为外部 Vue 组件设置数据

Question

我一直在使用 Vue 2.0 和单文件组件构建 Web 应用程序，遇到了一个我无法弄清楚但需要解决的问题。

就目前而言，我的相关文件结构如下...

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' 事件，客户端套接字完全可以接收该事件，但是，我想要做的是来自后端套接字发射的有效负载并将其分配给App组件的数据。

在socket.on('test') 的回调中，我目前收到App.$set 的undefined function 类型的错误。我也尝试过使用 Vue.set(App, 'test', payload) 的全局 API，但也没有用。

任何帮助将不胜感激！

编辑

也就是说，导入后如何从另一个JS文件中操作单个文件组件的data对象？

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。现在你必须通过在你的请求中调用 store 的 dispatch 函数来更新 vuex 中的 allLots 数据，以便在 App.vue...

与您在main.js 中所做的类似，将存储导入App.vue 并更新此代码：

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

所以这将在您商店的操作中将data.results 作为lots 参数发送：setAllLots

...将lots 参数提交到您商店的mutation：setAllLots

...使用lots 参数更新您的allLots 数据

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

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

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

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

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

尝试再次导入store 并调用：

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

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

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