Vuex store not injected into Component in ListView template


#1

Hi,

I am trying to use Vuex but my store doesn’t get injected to components I am using in a template for a ListView.
This is my sample code:

const Vue = require('nativescript-vue/dist/index')
const Vuex = require('vuex')

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    items: [{"foo": "bar"}]
  },
  actions: {
    reload(context) { console.log("RELOAD") }
  }
})

Vue.component("item-view", {
  props: ["foo"],

  template: `
    <Switch @checkedChange="reload" />
    `,

  methods: {
    reload() { this.$store.dispatch("reload") }
  },
})

new Vue({
  store,
  template: `
    <page ref="page">
      <ListView :items="items">
        <template scope="item">
          <item-view v-bind="item" />
        </template>
      </ListView>
    </page>
    `,

  computed: {
    items() { return this.$store.state.items  },
  }
}).$start()

when I tap on the Switch it says:

JS ERROR TypeError: undefined is not an object (evaluating 'this.$store.dispatch')

My guess is thats its related with the scope of the template, can anyone guide me how to do it the right way?

Thanks!


#2

ok, looks like its generally not working

the workaround is to define

Vue.prototype.$store = store