Issues with arrays in Vuex store

[IronCrystal]

Found an issue or bug with electron-vue? Tell me all about it!

Questions regarding how to use electron or vue are likely to be closed as they are not direct issues with this boilerplate. Please seek solutions from official documentation or their respective communities.

Describe the issue / bug.

# I'm not sure if I'm just not using arrays properly in vuex, or what but I'm having an issue with having an array of objects in my store. In my "main" electron process I can display the array in the store and even add to it through an action, but in my "render" process it tells me the array is empty.

How can I reproduce this problem?

#

I have a store module that looks like the following named connections.js:

const state = {
  connections: []
}

const mutations = {
  ADD_CONNECTION (state, connection) {
    state.connections.push(connection)
  },
  CLEAR_CONNECTIONS (state) {
    state.connections = []
  }
}

const actions = {
  addConnection ({ commit }, connection) {
    commit('ADD_CONNECTION', connection)
  },
  clearConnections ({ commit }) {
    commit('CLEAR_CONNECTIONS')
  }
}

const getters = {
  getConnections: state => {
    return state.connections
  },
  getConnectionCount: state => {
    return state.connections.length
  }
}

export default {
  state,
  mutations,
  actions,
  namespaced: true,
  getters
}

In my main process file index.js I have the following code

import store from '../renderer/store'

console.log('CONNECTIONS', store.getters['connections/getConnections'])
console.log('NUMBER OF CONNECTIONS', store.getters['connections/getConnectionCount'])

This console log displays an array like this:

 CONNECTIONS [ { name: [Getter/Setter],
      dialect: [Getter/Setter],
      host: [Getter/Setter],
      username: [Getter/Setter],
      port: [Getter/Setter],
      password: [Getter/Setter],
      database: [Getter/Setter] },
    { name: [Getter/Setter],
      dialect: [Getter/Setter],
      host: [Getter/Setter],
      username: [Getter/Setter],
      port: [Getter/Setter],
      password: [Getter/Setter],
      database: [Getter/Setter] } ]
NUMBER OF CONNECTIONS 2

Not sure why it shows like Getter/Setter but I can at least see there are elements in the array.

In my component I have created, I have the following code:

<script>
  import Server from './server'

  import { createNamespacedHelpers } from 'vuex'

  const { mapGetters } = createNamespacedHelpers('connections')

  export default {
    name: 'ServerNav',
    components: { Server },
    data () {
      return {}
    },
    computed: {
      ...mapGetters(['getConnections', 'getConnectionCount'])
    },
    methods: {
      log: function () {
        console.log('GET CONNECTIONS', this.getConnections)
        console.log('CONNECTIONS COUNT', this.getConnectionCount)
      }
    }
  }
</script>

I have an element that calls the log() function whenever I click on it. It always displays an empty array for getConnections and a getConnectionCount of 0.

Also, whenever I look in the dev tools for the VUE state, it shows empty array for the connections.

I have no idea why the state seems to be different between the main process and the render process. Any help is greatly appreciated.

If visual, provide a screenshot.

#

Tell me about your development environment.

• Node version: 12.16.1
• NPM version: 6.13.4
• vue-cli version: (if necessary)
• Operating System: Windows

If you are looking to suggest an enhancement or feature, then feel free to remove everything above.