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 vuex@2.5.0. 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.

[sebj54]

Unfortunately the "No Vuex store detected" error came back. It works with submodules but it stops working once you are using mapGetters in the App component.

With HMR, the Vuex store seems frozen. Even if I comment everything in my store (states, getters, etc.), they still appear in the Vuex pane. The opposite is also true: if I had a store module, it does not appear either. One other "funny" thing: if Vuex pane gets stuck and you run another NS-Vue app, you can see the previous app's store.

It is sad because this pane is very convenient when debugging. Actually, it feels kind of "hacky" to have a consistant behavior across our views.

Don't hesitate to tell me if I can help you somehow to debug this.

[rigor789]

Thanks @sebj54 for the info - does it still do it with hmr disabled (--no-hmr)?

The way HMR works is, it replaces chunks of your code when it changes, however it may not clean up everything properly (this is mostly handled by vue's hmr implementation, but we may be missing edge cases too).

I don't currently have the capacity to dive deep and debug this - but will definitely refer back to this issue when I do - so any extra bit of info is helpful!

[Rho-bur]

works for me after moving the store import after Vue.use(VueDevtools) as advised above and applying the HTML fix here, https://stackoverflow.com/questions/58672942/htmlelement-is-not-defined-nativescript-vue

vue-devtool in dev dependencies not in dependencies, vuex 3.1.1