Home

Issue: 1803

How can I use vuex store in custom Vue object?

[issue link]

I have to have some component on every pages with different layouts, so I just use entry.js plugin for creating new Vue component and inserting it in document.

entry.js

import someComponent from '@/components/some-component'
import Vue from 'vue'

var someDiv = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(someDiv);

new Vue(_.extend({}, someComponent, {
  el: someDiv,
}));

And it works fine while I don’t use vuex store, but if I would

some-component.vue

<template>
  <div style="position: fixed; background-color: red; height:100px; width:100px;top:0">
      {{text}}
  </div>
</template>
<script>
  import { mapState } from 'vuex'

  export default {

    computed: {
      ...mapState('texts', ['text']),
    },

  };
</script>

It cause errors
image

How can I overcome it?

This question is available on Nuxt.js community (#c1620)