[Vuejs]-Setting data for external Vue component

by

0👍

Try using Vuex

It looks like you should consider using Vuex for this and it would be quite easy to setup even though it seems long.

This would be a basic example of the Vuex store file:

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)
    }
  }
})

In your main.js file:

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

and update below:

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

This sets up vuex with your vue instance. Now you will have to update the allLots data in vuex by calling the store’s dispatch function in your request to get lots in App.vue…

Import store into App.vue similar to what you did in main.js and update this code:

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

So what this will do is send data.results as the lots parameter in your store’s action: setAllLots

…which commits the lots parameter to your store’s mutation: setAllLots

…which updates your allLots data with the lots parameter

Now that vuex is updated, you can retrieve this information anywhere your store is imported using the lots getter.

So to get it in your App.vue, use a computed property (replaces allLots in your returned data) like this:

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

Your allLots will be rendered in your template from the computed property now.

My first response to this was incorrect, because I originally misread your issue, but realized this should still work.

Try to once again import store and call:

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

Assuming your socket code is correct, this should work for you since the vuex is set and your computed property is reactive. I did not test this last part, so I hope this helps you out!

Regardless, I hope this helps you or anyone with quickly setting up Vuex.

Leave a comment