Vuex for better State-Management and Vue-DevTools

[ghost]

Having some problems with the points in the Header.

Vue-DevTools:
while debugging in chrome, vue-devtools plugin will not detect that i'm working on a vue-project.

Vuex:
After installing "vuex" and "babel-preset-stage-2" i got following error message after import e.g. { mapActions }

ERROR in ./~/vue-loader/lib/selector.js?type=script&index=0!./src/assets/vue/pages/components/add.vue
Module parse failed: C:\phonegap\mytime\node_modules\vue-loader\lib\selector.js?type=script&index=0!C:\phonegap\mytime\src\assets\vue\pages\components\add.vue Unexpected token (34:8)
You may need an appropriate loader to handle this file type.
|
| methods: {
| ...mapActions([ <-- Line 34
| 'addAccount'
| ]),
@ ./src/assets/vue/pages/components/add.vue 3:2-97
@ ./src/routes.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8081 webpack/hot/dev-server ./src/main.js ./webpack/dev_helpers/CordovaDeviceRouter.js

Any suggestions?

Many thanks in advance,

[centrual]

Hello @SgtPepper27

For babel: #29

For Vuex:
npm i vuex --save-dev

• Create folder structure like that:

| -- src
|----|-- store
|----|----|-- index.js
|----|----|-- actions.js
|----|----|-- getters.js
|----|----|-- mutations.js

• Open src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as mutations from './mutations'
import * as getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  actions,
  mutations,
  getters
})

Also edit the actions, mutations and getters js files like: https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart/store

• Open src/main.js

// ...
import store from './store'
// ...
new Vue({
  // ...
  store
  // ...
})

and it's ready.

If you want to use mapActions, mapGetters or mapMutations you need to add this:

import { mapActions, mapMutations, mapGetters } from 'vuex'

For Vue-devtools:
Install vue-devtools extension to your main chrome. Run browser with cordova run browser -- --lr. Wait for compile. When browser opens (the opened browser is not your main browser, just another chromium browser), copy the url and open it from your main chrome browser. You can use vue-devtools now.

For Android:
I don't know any way to make vue-devtools extension compatible with mobile inspect.

Have a great day! 😃

[ghost]

Gone through the tutorial #29, but still get the error "Unexpected token" => spread syntax still not working.

vuex syntax you postet above is not the problem, but the spread syntax "..."

...mapActions([
'addAccount'
]),

[centrual]

Upgrade your node.js version. Minimum node.js requirement is 6.5.0. You can check with node -v

[ghost]

I already have version 7.6.0. Example worked for me as nomal vuejs project with template webpack-simple, but on this template i struggle.

in my standard vuejs project my .babelrc file looks like that:
{
"presets": [
["es2015", { "modules": false }],
["stage-2"]
]
}

and that´s it to use spread syntax.

[centrual]

Spread syntax about ES6, not about this template. Please check one more time:

import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'

must be added into your file and babel must be configured right.

Also it can be about babel preset. es2015 preset description: Only compiles ES2015 to ES5. Spread is ES6 syntax. Please try with env preset too.

Also check is your presets installed with npm ls --depth=0. If not you can install with this command:

npm install --save-dev babel-loader babel-plugin-transform-runtime babel-preset-stage-2 babel-preset-es2015

or for env:

npm install --save-dev babel-loader babel-plugin-transform-runtime babel-preset-env

So there is so much possibilities, but the template is not inside these possibilities for this error.

[ghost]

Now it work´s - Thanks. Following settings worked for me:

.babelrc:
{
"presets": [
["stage-2"],
["env"]
]
}

webpack.config.js:
module-->rules-->

{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'stage-2'],
plugins: ['transform-runtime']
}
}
},

[mandalmanav]

in your webpack add the following
module: {
rules: [
...
...,
{
test: /.js$/,
loader: 'babel-loader'
}