Vuex

[mrmonat]

Is vuex supposed to be shown when used? For me it just says "No Vuex Store detected".

[subhaze]

IIRC, the webinar they had yesterday (Oct. 4th) stated that this is a "coming soon" feature.

[vlowe85]

Any update on this feature?

[megabayt]

Subscribing to this

[rigor789]

https://github.com/vuejs/vuex/pull/1404 has been merged, but Vuex has not been released since then. Once a new version gets released, it will work out of the box.

[madsb]

Tried running vuex from the dev branch, but no dice. Anyone got this to work?

[keithgulbro]

@madsb No luck on my end either, this item should be prioritized higher considering VueX is a major feature utilized by nearly all VueJS applications. What are your thoughts?

[ExcelNet-Public]

Cannot get this working either no matter what I have tried. This is critical as far as I am concerned as well for a good working development environment. Hopefully, soon!

[danieltran]

Agreed, would be great to have this implemented!

[odai-alali]

https://github.com/vuejs/vuex/releases/tag/v3.1.1 released yesterday

[odai-alali]

It's alive 👹

[madsb]

Can't seem to get this to work no matter what I do. I still get "No Vuex store detected." in vue-devtools. @odai-alali, did you just upgrade to 3.1.1 and it ran out of the box?

[rigor789]

@madsb what order are you importing Vuex/VueDevtools? I found out it sometimes matters! (VueDevtools should be before Vuex)

[odai-alali]

@madsb Yeah, I've just updated the package version and it worked after that.

This is my main.js

import Vue from 'nativescript-vue';

import VueDevtools from 'nativescript-vue-devtools'

import store from './store';
import BackendService from './services/BackendService'
import Login from './screens/Login'
import Home from './screens/Home'
const backendService = new BackendService()
Vue.config.silent = (TNS_ENV === 'production');
//use devtools
if(TNS_ENV !== 'production') {
  Vue.use(VueDevtools, { host: '192.168.208.125' });
}
new Vue({
  components: {
    Home,
    Login
  },
  computed: {
    isSoftLoggedIn () {
      return backendService.isSoftLoggedId()
    }
  },
  template: `
    <Frame>
      <Login v-if="!isSoftLoggedIn" />
      <Home v-if="isSoftLoggedIn" />
    </Frame>
  `,
  store,
}).$start({
  getRootView(vm) {
    return vm.$el.nativeView
  }
});

[odai-alali]

I've just noticed that the state is not changing in devtools. The store is detected though.

[cjharkins]

@odai-alali Did you ever find a solution? I'm running into the same issue

[odai-alali]

@cjharkins unfortunately not. I switched to another project.

[rebz]

I too am unable to get Vuex to load in vue-devtools. I've enabled/disabled the Vuex options under vue-devtools with no luck.

package.json

"@vue/devtools": "^5.1.0",
"nativescript-socketio": "^3.2.1",
"nativescript-toasty": "^1.3.1",
"nativescript-vue": "^2.0.0",
"nativescript-vue-devtools": "^1.2.0",
"tns-core-modules": "^5.0.2",

main.js

import Vue from 'nativescript-vue'
import store from './store';
import router from './router';

import VueDevtools from 'nativescript-vue-devtools'

if(TNS_ENV !== 'production') {
    Vue.use(VueDevtools, {
        host: '192.168.1.85'
    })
    Vue.config.devtools = true;
}

Vue.config.silent = (TNS_ENV === 'production')

new Vue({
    store,
    render: h => h('frame', [h(router['home'])])
}).$start()

store/index.js

import Vue from 'nativescript-vue';
import Vuex from 'vuex'
import { default as modules } from './modules'

Vue.config.devtools = true;

Vue.use(Vuex)

export default new Vuex.Store({
    modules: modules
})

[Wiejeben]

@rebz Look at what @rigor789 said. I fixed it by making import VueDevtools from 'nativescript-vue-devtools' be above import store from './store';.

However it still isn't perfect to me, NativeScript crashes when mutating the state (inside a mutation).

[rigor789]

Seems like there has been some refactoring around Vuex in the devtools recently...

It was working perfectly fine when I created the PR to vuex to allow usage in nsvue.

I don't currently have time to look through the source of vuex/vue-devtools to debug why it doesn't work every time. (For me, even with the correct import order, occasionally it would not show up)

[rebz]

@Wiejeben - Had been doing that, it has still yet to work. In the mean time I created several computed properties in my root component that returned the state of each store module. Ugly fix, but it works for now.

[zzhenryquezz]

Works for me when I update the vuex package to 3.1.1 and put the code like this way:

if(TNS_ENV !== 'production') {
  Vue.use(VueDevtools, { host: '<your ip addr>' })
}

import store from './store/index';

[CesarGomezTissini]

In my end, the issue is this

[belvederef]

I've just noticed that the state is not changing in devtools. The store is detected though.

I have exactly the same problem. I can see the store state at start up but it does not get updated when the state changes. This makes the vue tools pretty much useless. Has anyone found a solution to this?

[svilenkov]

Once I've moved the import store line below the VueDevtools, I get a

file:///app/webpack:/home/akryum/Projects/vue-devtools/node_modules/@vue-devtools/app-backend/src/hook.js:419:0: JS ERROR ReferenceError: Can't find variable: HTMLElement

Funny thing is that a suggestion for this problem is to put the store import above : https://stackoverflow.com/a/58753786/664179

So it becomes kind of a chicken and egg problem, not sure what else try to get the Vuex state to show up in the dev tools using tns version 6.1.1 (ios) and 6.1.2 (android)

UPDATE: With these 2 changes I can see the store in the debug tools!

main.ts

import VueDevtools from 'nativescript-vue-devtools'
Vue.use(VueDevtools)
import store from "./store/index";  // moved after the VueDevTools definitions

And a fix for the ReferenceError: Can't find variable: HTMLElement here: https://stackoverflow.com/a/58983252/664179

[sebj54]

I tried everything in this issue and I still have "No Vuex store detected" with latest version (1.4.0).

Anyone has made it work?

[rigor789]

@sebj54 I was testing this a few days ago, using latest @vue/devtools and latest nativescript-vue-devtools

I also swapped the import order to be

// ...
import VueDevtools from 'nativescript-vue-devtools'
// ...
Vue.use(VueDevtools)
// ...
import store from './store'

and the store would show up in devtools - and I could change state, see mutation logs etc.

[sebj54]

I may have an issue somewhere because this is something I tried and it did not work. Maybe namespaced Vuex modules?

Do you do extra steps after chaning your main.js file? Cleaning platforms folder maybe?

Does vue-cli-template work out of the box with Vuex? I think I should start with an empty app to reduce possible context errors.

[rigor789]

@sebj54 yes, a new vue-cli-template project should be working fine. That's what I was testing with (and updated the template to make it work properly)

[DocPaintfull]

I had this problem and updated the dependencies, the older template had [email protected]. It now works for me while creating a new project from template.

[sebj54]

Hi @rigor789, I just started a fresh new project with the latest vue-cli-template and it worked as expected! My store is still empty but I can see it in Vue Devtools.

I'll let you know if it stops working when I'll add store modules.