New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vuex state with a Class inside is working in background, but not in popup #17

Open
Kocal opened this Issue Jan 5, 2019 · 1 comment

Comments

1 participant
@Kocal
Copy link

Kocal commented Jan 5, 2019

Hey! I finally have some time to use this Vuex plugin on a real project! :)

I think my problem is due to serialization/unserialization (JSON?) of my store state.

Given my store is:

import Vue from 'vue';
import Vuex from 'vuex';
import { Channelfrom '...';

export const store = new Vuex.Store({
  state: {
    channels: [new Channel('foo', 'bar')]
  },
  getters: {
    firstChannel(state) {
      return state.channels[0];
    }
  }
})

When I use it in background, store.getters.firstChannel is an instance of Channel class.
But when I use it in my popup page inside a Vue component, this.$store.getters.firstChannel (or mapGetters(['firstChannel'])) is a plain object, without prototype.

I think it's a problem of serialization because some months ago, I had the same problem with chrome.runtime.sendMessage(). For each received data, I had to manually set __proto__ property:

<!-- in a .vue file -->
<script>
import { Channelfrom '...';

export default {
  data() {
    return {
      channels: []
    }
  },
  methods: {
    retrieveChannels() {
      chrome.runtime.sendMessage({ type: 'GET_CHANNELS' }, response => {
        this.channels = response.data.channels.map(channel => {
          channel.__proto__ = Channel.prototype;
          return channel;
        });
      });
    },
  },
}
</script>

But in this case I don't know how to do this.
Maybe a store watcher inside my popup/main.js or a Vue watcher inside popup/App.vue?

What do you think?

Thanks! :)

@Kocal Kocal changed the title How can I pass an ES6 Class/Prototype from Background to Popup? Vuex state with a Class inside is working in background, but not in popup Jan 5, 2019

@Kocal

This comment has been minimized.

Copy link

Kocal commented Jan 5, 2019

Okay so I found a workaround, it's not really pretty but it works.

I'm using a computed property that use a store's getter, and set prototypes on the fly.

In my case, I do this:

<script>
import { Game } from '../entities/Game';
import { Stream } from '../entities/Stream';
import { Channel } from '../entities/Channel';

export default {
  computed: {
    twitchChannels() {
      return this.$store.getters.twitchChannels.map(channel => {
        channel.__proto__ = Channel.prototype;

        if (channel.stream) {
          channel.stream.__proto__ = Stream.prototype;

          if (channel.stream.game) {
            channel.stream.game.__proto__ = Game.prototype;
          }
        }

        return channel;
      });
    },
  }
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment