Can someone explain when you would use a dispatch versus a commit?

I understand a commit triggers mutation, and a dispatch triggers an action.

However, isn&#39;t a dispatch also a type of action? 



Vuex 2.0 Dispatch versus Commit

I have an action in a namespaced module and a global mutation (i.e. not in a module). I would like to be able to commit the global mutation inside the action.

    // Global mutation
    export default {
      globalMutation (state, payload) {
        ...
      }
    }

    // Action in a namespaced module
    export default {
      namespaced: true,

      actions: {
        namespacedAction ({ commit, dispatch, state }, payload) {
          commit({ type: &#39;globalMutation&#39; })
        }
      }
    }

When the namespaced action is dispatched, Vuex displays:

    [vuex] unknown local mutation type: globalMutation, global type: module/globalMutation

Is there an option I can pass to the `commit` function to call this global mutation?

Vuex | How to commit a global mutation in a module action?

I am using `vuex` and `vuejs 2` together.

I am new to `vuex`, I want to watch a `store` variable change.

I want to add the `watch` function in my `vue component`

This is what I have so far:

    import Vue from &#39;vue&#39;;
    import {
      MY_STATE,
    } from &#39;./../../mutation-types&#39;;
    
    export default {
      [MY_STATE](state, token) {
        state.my_state = token;
      },
    };

I want to know if there are any changes in the `my_state`

How do I watch `store.my_state` in my vuejs component?

How to watch store values from vuex?

In vue.js app, using vuex as state management store, I need to simply change the value of a property in vuex. For this I can follow two methods:

1. Dispatch an `action` method, which will further commit `mutation`, which eventually will change the state.

2. The second method is to commit the `mutation` directly from the component and the mutation method will then change the state.

Currently, I&#39;m using first method like this:

**In Component:**

`this.$store.dispatch(&#39;updateNotice&#39;, &#39;This is some notice&#39;)`

**In Actions:**

`updateNotice ({state, getters, commit}, payload) {
   commit(&#39;UPDATE_NOTICE&#39;, payload)
 }`

**In Mutations:**

`UPDATE_NOTICE (state, payload) {
   state.notice = payload
}`

As you might have noticed, I&#39;m using the `action` method simply to commit a *single* mutation, without any other logic or *async* functionality.

My question is, in this case, should I not directly commit the mutation from the component itself? What is the best practice? Since using `action` method in this simple case seems verbose and serve no specific purpose.

Is there any reason that I should always `commit` actions from a component?
 Afterall, in vuex the `...mapMutations()` have some reason to exist.

Vuex: Skipping Action and committing Mutation directly from Component

In Vuex, what is the logic of having both &quot;actions&quot; and &quot;mutations?&quot;

I understand the logic of components not being able to modify state (which seems smart), but having both actions and mutations seems like you are writing one function to trigger another function, to then alter state.  

What is the difference between &quot;actions&quot; and &quot;mutations,&quot; how do they work together, and moreso, I&#39;m curious why the Vuex developers decided to do it this way?

Vuex Action vs Mutations

Is it possible to dispatch an action between namespaced modules?

E.g. I have vuex modules &quot;gameboard&quot; and &quot;notification&quot;. Each are namespaced. I would like to dispatch an action from the gameboard to the notification module. 

I thought I could use the module name in the dispatch action name like this:

    // store/modules/gameboard.js
    const actions = {
        myaction ({dispatch}) {
            ...
            dispatch(&#39;notification/triggerSelfDismissingNotifcation&#39;, {...})
        }
    }

    // store/modules/notification.js
    const actions = {
        triggerSelfDismissingNotification (context, payload) {
            ...
        }
    }

But when I try to do this I get errors that make me thing vuex is trying to dispatch an action within my gameboard module:

&gt; [vuex] unknown local action type: notification/triggerSelfDismissingNotification, global type: gameboard/notification/triggerSelfDismissingNotification

Is there a way of dispatching from vuex module to module or do I need to create some kind of a bridge in the root vuex instance?

Is there a way to dispatch actions between two namespaced vuex modules?

I have the following setup for my actions:

&lt;!-- language: javascript --&gt;
    get1: ({commit}) =&gt; {
      //things
      this.get2(); //this is my question!
    },
    get2: ({commit}) =&gt; {
      //things
    },

I want to be able to call one action from within another, so in this example I want to be able to call `get2()` from within `get1()`. Is this possible, and if so, how can I do it?

Call an action from within another action

I am trying to authenticate a user using vuejs and laravel&#39;s passport.&lt;br&gt;&lt;br&gt;**I am not able to figure out how to send multiple parameters to the vuex mutation via an action.**&lt;br&gt;&lt;br&gt;
**- store -**
```
export default new Vuex.Store({
  state: {
    isAuth: !!localStorage.getItem(&#39;token&#39;)
  },
  getters: {
    isLoggedIn(state) {
      return state.isAuth
    }
  },
  mutations: {
    authenticate(token, expiration) {
      localStorage.setItem(&#39;token&#39;, token)
      localStorage.setItem(&#39;expiration&#39;, expiration)
    }
  },
  actions: {
    authenticate: ({
      commit
    }, token, expiration) =&gt; commit(&#39;authenticate&#39;, token, expiration)
  }
})
```
**- login method -**
```
login() {
  var data = {
    client_id: 2,
    client_secret: &#39;**************************&#39;,
    grant_type: &#39;password&#39;,
    username: this.email,
    password: this.password
  }
  // send data
  this.$http.post(&#39;oauth/token&#39;, data)
    .then(response =&gt; {
      // send the parameters to the action
      this.$store.dispatch({
        type: &#39;authenticate&#39;,
        token: response.body.access_token,
        expiration: response.body.expires_in + Date.now()
      })
    })
}
```
I would be very thankful for any kind of help!

Vuex - passing multiple parameters to mutation

I have a component with some form validation. It is a multi step checkout form. The code below is for the first step. I&#39;d like to validate that the user entered some text, store their name in the global state and then send then to the next step. I am using [vee-validate][1] and vuex

&lt;!-- language: lang-html --&gt;

    &lt;template&gt;
    &lt;div&gt;
        &lt;div class=&#39;field&#39;&gt;
            &lt;label class=&#39;label&#39; for=&#39;name&#39;&gt;Name&lt;/label&gt;
            &lt;div class=&quot;control has-icons-right&quot;&gt;
    
                &lt;input name=&quot;name&quot; v-model=&quot;name&quot; v-validate=&quot;&#39;required|alpha&#39;&quot; :class=&quot;{&#39;input&#39;: true, &#39;is-danger&#39;: errors.has(&#39;name&#39;) }&quot; type=&quot;text&quot; placeholder=&quot;First and Last&quot;&gt;
                &lt;span class=&quot;icon is-small is-right&quot; v-if=&quot;errors.has(&#39;name&#39;)&quot;&gt;
                    &lt;i class=&quot;fa fa-warning&quot;&gt;&lt;/i&gt;
                &lt;/span&gt;
            &lt;/div&gt;
            &lt;p class=&quot;help is-danger&quot; v-show=&quot;errors.has(&#39;name&#39;)&quot;&gt;{{ errors.first(&#39;name&#39;) }}&lt;/p&gt;
    
        &lt;/div&gt;
        &lt;div class=&quot;field pull-right&quot;&gt;
            &lt;button class=&quot;button is-medium is-primary&quot; type=&quot;submit&quot; @click.prevent=&quot;nextStep&quot;&gt;Next Step&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/template&gt;

    &lt;script&gt;
    export default {
        methods: {
            nextStep(){
                var self = this;
    
                // from baianat/vee-validate
                this.$validator.validateAll().then((result) =&gt; {
                    if (result) {
                        this.$store.dispatch(&#39;addContactInfoForOrder&#39;, self);
                        this.$store.dispatch(&#39;goToNextStep&#39;);
                        return;
                    }
                });
            }
        },
        computed: {
            name: function(){
                return this.$store.state.name;
            }
        }
    }
    &lt;/script&gt;

I have a store for handling order state and recording the name. Ultimately I would like to send all of the info from multi step form to the server.

&lt;!-- language: lang-js --&gt;
        
    export default {
      state: {
      	name: &#39;&#39;,
      },
    
      mutations: {
      	UPDATE_ORDER_CONTACT(state, payload){
          state.name = payload.name;

        }
      },
    
      actions: {
      	addContactInfoForOrder({commit}, payload) {
          commit(&#39;UPDATE_ORDER_CONTACT&#39;, payload);
        }
      }
    }

When I run this code I get an error that `Computed property &quot;name&quot; was assigned to but it has no setter.`

How do I bind the value from the name field to the global state? I would like this to be persistent so that even if a user goes back a step (after clicking &quot;Next Step&quot;) they will see the name they entered on this step


  [1]: https://github.com/baianat/vee-validate

Vuex - Computed property &quot;name&quot; was assigned to but it has no setter

I recently started migrating things from jQ to a more structured framework being VueJS, and I love it!

Conceptually, Vuex has been a bit of a paradigm shift for me, but I&#39;m confident I know what its all about now, and totally get it! But there exist a few little grey areas, mostly from an implementation standpoint.

This one I feel is good by design, but don&#39;t know if it contradicts the Vuex [cycle](http://vuex.vuejs.org/en/images/vuex.png) of uni-directional data flow.

Basically, is it considered good practice to return a promise(-like) object from an action? I treat these as async wrappers, with states of failure and the like, so seems like a good fit to return a promise. Contrarily mutators just change things, and are the pure structures within a store/module.

Returning Promises from Vuex actions

My app uses the Firebase API for User Authentication, saving the Login status as a boolean value in a Vuex State.

When the user logs in I set the **login status** and conditionally display the Login/Logout button accordingly.

But when the​ page is refreshed, the state of the vue app is lost and reset to default

This causes a problem as even when the user is logged in and the page is refreshed the **login status** is set back to **false** and the login button is displayed instead of logout button even though the user stays logged in....

**What shall I do to prevent this behavior**

Shall I use **cookies**
Or any other better solution is available...

 - 




Vuex state on page refresh

Consider a simple Vue blog:&lt;br/&gt;
 I&#39;m using Vuex as my datastore and I need to set up two [getters](https://vuex.vuejs.org/en/getters.html): a `getPost` getter for retrieving a `post` by ID, as well as a `listFeaturedPosts` that returns the first few characters of each featured post. The datastore schema for the featured posts list references the posts by their IDs. These IDs need to be resolved to actual posts for the purposes of showing the excerpts.

**store/state.js**

    export const state = {
      featuredPosts: [2, 0],
      posts: [
        &#39;Lorem et ipsum dolor sit amet&#39;,
        &#39;Lorem et ipsum dolor sit amet&#39;,
        &#39;Lorem et ipsum dolor sit amet&#39;,
        &#39;Lorem et ipsum dolor sit amet&#39;,
        &#39;Lorem et ipsum dolor sit amet&#39;,
      ]
    }

**store/getters.js**

&lt;!-- language: lang-js --&gt;

    export default getPost = (state) =&gt; (postID) =&gt; {
      return state.posts[postID]
    }
    
    export default listFeaturedPosts = (state, getters) =&gt; () =&gt; {
      console.log(getters) // {}

      return state.featuredPosts.map(postID =&gt; getters.getPost(postID).substring(0, EXCERPT_LENGTH);
    }

**store/index.js**

&lt;!-- language: lang-js --&gt;

    import Vue from &#39;vue&#39;
    import Vuex from &#39;vuex&#39;
    import state from &#39;./state&#39;
    import * as getters from &#39;./getters&#39;
    import * as mutations from &#39;./mutations&#39;
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state,
      getters,
      mutations
    })

According to the documentation, the `getters` parameter can be used to access other getters. However, when I try to access `getters` from inside `listFeaturedPosts`, it&#39;s empty, and I get an error in the console due to `getters.getPost` being undefined in that context.

How do I call `getPost` as a Vuex getter from inside `listFeaturedPosts` in the example above?

How do I call a getter from another getter in Vuex?

# Overview

In Vue.js 2.x, [`model.sync` will be deprecated][1].

So, what is a proper way to communicate between sibling components in [Vue.js 2.x][2]?

----

## Background

As I understand Vue.js 2.x, the preferred method for sibling communication **is to use a store or an event bus**.

According to [Evan][3] (creator of Vue.js):

&gt; It&#39;s also worth mentioning &quot;passing data between components&quot; is
&gt; generally a bad idea, because in the end the data flow becomes
&gt; untrackable and very hard to debug.
&gt;
&gt; If a piece of data needs to be shared by multiple components, prefer
&gt; [global stores][4] or [Vuex][5].

[[Link to discussion][6]]

And:

&gt; `.once` and `.sync` are deprecated. Props are now always one-way down. To
&gt; produce side effects in the parent scope, a component needs to
&gt; explicitly `emit` an event instead of relying on implicit binding.

So, [Evan suggests][7] using `$emit()` and `$on()`.

----

## Concerns

What worries me is:

 - Each `store` and `event` has a global visibility (correct me if I&#39;m wrong);
 - It&#39;s too wasteful to create a new store for each minor communication;

What I want is to some **scope** `events` or `stores` visibility for siblings components. (Or perhaps I didn&#39;t understand the above idea.)

----

# Question

So, what is the correct way to communicate between sibling components?

  [1]: https://github.com/vuejs/vue/issues/2873#issuecomment-223759015
  [2]: https://github.com/vuejs/vue/issues/2873
  [3]: http://forum.vuejs.org/user/evan
  [4]: http://vuejs.org/guide/state-management.html
  [5]: https://github.com/vuejs/vuex/
  [6]: http://forum.vuejs.org/topic/1530/pass-data-between-components/4
  [7]: https://github.com/vuejs/vue/issues/2873#issuecomment-223759341




Communication between sibling components in Vue.js 2.0

I want to access `state.session` in `instance.js` from `records_view.js`. How is this accomplished?

**store/modules/instance.js**

    const state = {
      // This is what I want to access in records_view.js
      session: {}
    };

    const getters = {
      sessionGetter: state =&gt; state.session
    };

**store/modules/records_view.js**

    const actions = {
      getSettingsAction (context, props) {
        // This is how I&#39;m trying to access session, which doesn&#39;t work
        let session = context.state.instance.session;

        Api(
          context,
          {
            noun: props.noun,
            verb: &#39;GetRecordsViewSettings&#39;,
            orgUnitKey: _.has(session, &#39;orgunit.key&#39;) ? session.orgunit.key : &#39;&#39;,
            data: {}
          },
          props.callback
        );
      }
    };

This is for a little bit of added context.

**store/index.js**

    import Vue from &#39;vue&#39;;
    import Vuex from &#39;vuex&#39;;
    import * as actions from &#39;./actions&#39;;
    import * as getters from &#39;./getters&#39;;
    import * as types from &#39;./mutation-types&#39;;

    import instance from &#39;./modules/instance&#39;;
    import recordsView from &#39;./modules/records_view&#39;;

    Vue.use(Vuex);

    export default new Vuex.Store({
      state,
      actions,
      getters,
      mutations,
      modules: {
        instance,
        recordsView
      }
    });


Vuex: Access State From Another Module

I have a Vue 2 project that has many (50+) [single-file components][1]. I use Vue-Router for routing and Vuex for state.

There is a file, called **helpers.js**, that contains a bunch of general-purpose functions, such as capitalizing the first letter of a string. This file looks like this:

&lt;!-- language-all: lang-js --&gt;

    export default {
      capitalizeFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
      }
    }

My **main.js** file initializes the app:

    import Vue from &#39;vue&#39;
    import VueResource from &quot;vue-resource&quot;
    import store from &quot;./store&quot;
    import Router from &quot;./router&quot;
    import App from &quot;./components/App.vue&quot;

    Vue.use(VueResource)

    const app = new Vue({
      router: Router,
      store,
      template: &#39;&lt;app&gt;&lt;/app&gt;&#39;,
      components: { App },
    }).$mount(&#39;#app&#39;)

My **App.vue** file contains the template:

&lt;!-- language-all: lang-html --&gt;

    &lt;template&gt;
      &lt;navbar&gt;&lt;/navbar&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
    &lt;/template&gt;

    &lt;script&gt;
    export default {
      data() {
        return {
          // stuff
        }
      }
    }
    &lt;/script&gt;

I then have a bunch of single-file components, which Vue-Router handles navigating to inside the `&lt;router-view&gt;` tag in the App.vue template.

Now let&#39;s say that I need to use the `capitalizeFirstLetter()` function inside a component that is defined in **SomeComponent.vue**. In order to do this, I first need to import it:

    &lt;template&gt;Some Component&lt;/template&gt;

    &lt;script&gt;
    import {capitalizeFirstLetter} from &#39;../helpers.js&#39;
    export default {
      data() {
        return {
          myString = &quot;test&quot;
        }
      },
      created() {
        var newString = this.capitalizeFirstLetter(this.myString)
      }
    }
    &lt;/script&gt;

This becomes a problem quickly because I end up importing the function into many different components, if not all of them. This seems repetitive and also makes the project harder to maintain. For example if I want to rename helpers.js, or the functions inside it, I then need to go into every single component that imports it and modify the import statement.

**Long story short:** how do I make the functions inside helpers.js *globally* available so that I can call them inside *any* component without having to first import them and then prepend `this` to the function name? I basically want to be able to do this:

    &lt;script&gt;
    export default {
      data() {
        return {
          myString = &quot;test&quot;
        }
      },
      created() {
        var newString = capitalizeFirstLetter(this.myString)
      }
    }
    &lt;/script&gt;


  [1]: https://vuejs.org/v2/guide/single-file-components.html

Vue.js - Making helper functions globally available to single-file components

I have a [vuex][1] store, like following:

    import spreeApi from &#39;../../gateways/spree-api&#39;
    // initial state
    const state = {
      products: [],
      categories: []
    }
    
    // mutations
    const mutations = {
     SET_PRODUCTS: (state, response) =&gt; {
       state.products = response.data.products
       commit(&#39;SET_CATEGORIES&#39;)
     },
     SET_CATEGORIES: (state) =&gt; {
       state.categories = state.products.map(function(product) { return product.category})
     }
    
    }
    
    const actions = {
     FETCH_PRODUCTS: (state, filters) =&gt; {
       return spreeApi.get(&#39;products&#39;).then(response =&gt; state.commit(&#39;SET_PRODUCTS&#39;, response))
     }
    }
    
    export default {
      state,
      mutations,
      actions
    }

I want to call mutation: `SET_CATEGORIES` from mutation: `SET_PRODUCTS`, But this gives me error: 

&gt;projectFilter.js:22 Uncaught (in promise) ReferenceError: commit is not defined(…)

What should be correct way to do this. I tried `store.commit` and `this.commit`, but these also gave similar errors.

  [1]: https://vuex.vuejs.org/en/intro.html


Can I call commit from one of mutations in Vuex store

I have two modules in my vuex store.

    var store = new Vuex.Store({
        modules: {
            loading: loading 
            posts: posts
        }
    });

In the module `loading`, I have a property `saving` which can be set either `true` or `false` and also have a mutation function named `TOGGLE_SAVING` to set this property.

In the module `posts`, before and after fetching posts, I want to change the property `saving`. I am doing it by calling `commit(&#39;TOGGLE_SAVING&#39;)` from one of the actions in the `posts` module. 

    var getPosts = function (context) {
        context.commit(TOGGLE_LOADING);
    };

When it tried to commit, I got following error in the console

    [vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING 

How can I mutate state in another module using `commit`?

Change another module state from one module in Vuex

My Vue component is like this :

    &lt;template&gt;
        &lt;div&gt;
            &lt;div class=&quot;panel-group&quot;v-for=&quot;item in list&quot;&gt;
                &lt;div class=&quot;col-md-8&quot;&gt;
                    &lt;small&gt;
                       Total: &lt;b&gt;{{ item.total }}&lt;/b&gt;
                    &lt;/small&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
        export default {
            ...
            computed: {
                list: function() {
                    return this.$store.state.transaction.list
                },
                ...
            }
        }
    &lt;/script&gt;


The result of `{{ item.total }}` is 

&gt; 26000000

But I want format it to be like this :

&gt; 26.000.000,00

In jquery or javascript, I can do it

But, How to do it in vue component?

How do I format currencies in a Vue component?

Is there a way for a dispatch/action to call a getter inside of it?

    mutations: {
        setData(state, data) {
            state.data = data;
        }
    }
    actions: {
        sendDataToServer({ commit }, payload) {
            // call getter (data) and assign to variable
            // do async functions from the data returned
        }
    },
    getters: {
        getAppData: state =&gt; () =&gt; {
            return state.data;
        }
    }

So what&#39;s the best practice here? Using the mutation to change the state and then get the state and pass it to action which will then execute the async function or do I need to restructure my implementation?

call mutation -&gt; get the data via getter -&gt; call action

OR

do it all on the action (do mutation on the action and do the action/async method without the need of the getter)?

Vuex: Call getters from action

I am creating a web app with Vue 2.x and Vuex 2.x. I am fetching some information from a remote location via an http call, I want that if that call fails I should redirect to some other page.

    GET_PETS: (state) =&gt; {
      return $http.get(&#39;pets/&#39;).then((response)=&gt;{
          state.commit(&#39;SET_PETS&#39;, response.data)
        })
      },
      error =&gt; {this.$router.push({path:&quot;/&quot;}) }
      )
    }
    
But `this.$router.push({path:&quot;/&quot;})` gives me following error.

&gt;Uncaught (in promise) TypeError: Cannot read property &#39;push&#39; of undefined

How can this be achieved.

Simulated JsFiddle: [here][1]


  [1]: https://jsfiddle.net/pukx3heb/1/

How to navigate using vue router from Vuex actions

I&#39;m using the [vue-cli scaffold for webpack](https://github.com/vuejs-templates/webpack)

My Vue component structure/heirarchy currently looks like the following:

- App
    - PDF Template
        - Background
        - Dynamic Template Image
        - Static Template Image
        - Markdown

At the app level, I want a vuejs component method that can aggregate all of the child component&#39;s data into a single JSON object that can be sent off to the server. 

**Is there a way to access child component&#39;s data? Specifically, multiple layers deep?**

If not, what is the best practice for passing down oberservable data/parameters, so that when it&#39;s modified by child components I have access to the new values? I&#39;m trying to avoid hard dependencies between components, so as of right now, the only thing passed using component attributes are initialization values.

**UPDATE:**

Solid answers. Resources I found helpful after reviewing both answers:

 - [Vuex and when to use it](https://vuex.vuejs.org/)
 - [Vuex alternative solution for smaller apps](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch)

VueJS access child component&#39;s data from parent

Within a vuex getter I know it is possible to access the state from another vuex module like so:

    pages: (state, getters, rootState) =&gt; {
        console.log(rootState);
    }

How can I access a getter from another vuex module instead of the state though? 

I have another vuex module called **filters** that I need to access, I have tried this:

    rootState.filters.activeFilters

Where `activeFilters` is my getter but this does not work. using `rootState.filters.getters.activeFilters` also does not work.

How to access the getter from another vuex module?

My state in vuex store is huge.

Is there a way to reset all the data in state in one go, instead of manually setting everything to null?

How to clear state in vuex store?

I have the following Vuex store (main.js):

```javascript
import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;

Vue.use(Vuex)

//init store
const store = new Vuex.Store({
    state: {
        globalError: &#39;&#39;,
        user: {
            authenticated: false
        }
     },
     mutations: {
         setGlobalError (state, error) {
             state.globalError = error
         }
     }
})

//init app
const app = new Vue({
    router: Router,
    store,
    template: &#39;&lt;app&gt;&lt;/app&gt;&#39;,
    components: { App }
}).$mount(&#39;#app&#39;)
```

I also have the following routes defined for Vue Router (routes.js):

```javascript
import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;

Vue.use(VueRouter)

//define routes
const routes = [
    { path: &#39;/home&#39;, name: &#39;Home&#39;, component: Home },
    { path: &#39;/login&#39;, name: &#39;Login&#39;, component: Login },
    { path: &#39;/secret&#39;, name: &#39;Secret&#39;, component: SecretPage, meta: { requiresLogin: true }
]
```

I&#39;m trying to make it so that, if Vuex stores the `user` object, and it has the `authenticated` property set to `false`, is has the router redirect the user to the login page.

I have this:

```javascript
Router.beforeEach((to, from, next) =&gt; {
    if (to.matched.some(record =&gt; record.meta.requiresLogin) &amp;&amp; ???) {
        // set Vuex state&#39;s globalError, then redirect
        next(&quot;/Login&quot;)
    } else {
        next()
    }
})
```

The problem is I don&#39;t know how to access the Vuex store&#39;s `user` object from inside the `beforeEach` function.

I know that I can have the router guard logic inside components using `BeforeRouteEnter`, but that would clutter up each component. I want to define it centrally at the router level instead.



Accessing Vuex state when defining Vue-Router routes

Is there a way to pass parameter into getter of `vuex` `store`? 
Something like:

    new Vuex.Store({
      getters: {
        someMethod(arg){
           // return data from store with query on args
        }
      }
    })
So that in component I could use 

    &lt;template&gt;
        &lt;div&gt;
            &lt;p&gt;{{someMethod(this.id)}}&lt;/p&gt;
        &lt;/div&gt;
    &lt;/template&gt;
    &lt;script lang=&quot;ts&quot;&gt;
        import { mapGetters } from &quot;vuex&quot;
    
        export default {
            props: [&#39;id&#39;],
            computed: mapGetters([&#39;someMethod&#39;])
            }
        }
    &lt;/script&gt;

but in vuex first argument is `state` and second is other `getters`. Is it possible?


vuexjs getter with argument

Within a Vuex store mutation, is it possible to access a getter? Consider the below example.

    new Vuex.Store({
        state: {
            question: &#39;Is it possible to access getters within a Vuex mutation?&#39;
        },
        mutations: {
            askQuestion(state) {
                // TODO: Get question from getter here
                let question = &#39;&#39;;
                
                if (question) {
                	// ...
                }
            }
        },
        getters: {
            getQuestion: (state) =&gt; {
                return state.question;
            }
        }
    });

Of course the example doesn&#39;t make much sense, because I could just access the `question` property directly on the `state` object within the mutation, but I hope you see what I am trying to do. That is, conditionally manipulating state.

Within the mutation, `this` is `undefined` and the `state` parameter gives access to the `state` object, and not the rest of the store.

[The documentation on mutations][1] doesn&#39;t mention anything about doing this.

My guess would be that it&#39;s not possible, unless I missed something? I guess the alternative would be to either perform this logic outside of the store (resulting in code duplication) or implementing an action that does this, because actions have access to the entire store context. I&#39;m pretty sure that it&#39;s a better approach, that is to keep the mutation focused on what it&#39;s actually supposed to do; mutate the state. That&#39;s probably what I&#39;ll end up doing, but I&#39;m just curious if accessing a getter within a mutation is even possible?


  [1]: http://vuex.vuejs.org/en/mutations.html

Accessing getters within Vuex mutations

I&#39;m trying to switch to using Vuex instead of my homegrown store object, and I must say I&#39;m not finding the docs as clear as elsewhere in the Vue.js world. Let&#39;s say I have a Vuex module called &#39;products&#39;, with its own state, mutations, getters, etc. How do I reference an action in that module called, say, &#39;clearWorking Data&#39;? The docs give this example of accessing a module&#39;s state:

    store.state.a // -&gt; moduleA&#39;s state

But nothing I can see about getters, mutations, actions, etc.

How to access Vuex module getters and mutations?

What is the exact difference between fetch and async data. The official documentation says the following:

&gt; **asyncData**
&gt;
&gt; You may want to fetch data and render it on the server-side. Nuxt.js
&gt; adds an asyncData method that lets you handle async operations before
&gt; setting the component data.
&gt;
&gt; **asyncData** is called every time before loading the component (only for
&gt; page components). It can be called from the server-side or before
&gt; navigating to the corresponding route. This method receives the
&gt; context object as the first argument, you can use it to fetch some
&gt; data and return the component data.


----------


&gt; **Fetch**
&gt;
&gt; The fetch method is used to fill the store before rendering the page, it&#39;s 
&gt; like the asyncData method except it doesn&#39;t set the component data.
&gt; The fetch method, if set, is called every time before loading the
&gt; component (only for page components). It can be called from the
&gt; server-side or before navigating to the corresponding route.
&gt; 
&gt; The fetch method receives the context object as the first argument, we
&gt; can use it to fetch some data and fill the store. To make the fetch
&gt; method asynchronous, return a Promise, nuxt.js will wait for the
&gt; promise to be resolved before rendering the component.

----------
Fetch is been used to fill the store with data? But in asyncData is this also possible to commit trough a store? I don&#39;t understand why there are two methods for.

Both methods are running server-side on the initial load, after that when you navigate through the applicatie it runs client side.

Can someone explain me the advantage of use these methods above the other?

Thanks for help.




Difference between Asyncdata vs Fetch

I have the below getter:
```js
    withEarmarks: state =&gt; {
        var count = 0;
        for (let l of state.laptops) {
            if (l.earmarks.length &gt; 0) {
                count++;
            }
        }
      return count;
    }
```
And in a component, this computed property derived from that getter:
```js
        withEarmarks() { return this.$store.getters.withEarmarks; },
```
The value returned is correct, until I change an element within the laptops array, and then the getter doesn&#39;t update.

Vuex getter not updating

I am using Vue.js 2.0 and Vuex 2.0 for a small app. I am initializing the store in the &#39;created&#39; life-cycle hook on the root Vue instance by calling an action that retrieves the initial state from an API....like so in my **Root Component**: 

```javascript
const app = new Vue({
    el: &quot;#app&quot;,
    router,
    store,
    data: {
        vacation: {},
    },
    components: {
        &#39;vacation-status&#39;: VacationStatus,
    },
    created() {
        //initialize store data structure by submitting action.
        this.$store.dispatch(&#39;getVacation&#39;);
    },
    computed: {},
    methods: {}
});
```

This is working just fine. Here is the action on my store that I&#39;m calling here:

```javascript
getVacation({ commit }) {
    api.getVacation().then(vacation =&gt; commit(UPDATE_VACATION, vacation))
}
```

The mutation that this is committing with &#39;UPDATE_VACATION&#39; is here: 

```javascript
[UPDATE_VACATION] (state, payload) {
   state.vacation = payload.vacation;
},
```

**My Problem:** When I load the app, all my components that are &#39;getting&#39; values from the store throw errors I&#39;m trying to access &#39;undefined&#39; values on the store. In other words, state hasn&#39;t been initialized yet. 

For example, I have a component that has getters in **Child Components** like this:

```javascript
computed: {
    arrival() {
        return this.$store.getters.arrival
    },
    departure() {
        return this.$store.getters.departure
    },
    countdown: function() {
        return this.$store.getters.countdown
    }
}
```

All these getters cause errors because &#39;vacation&#39; is undefined on the state object. It seems like an asynchronous problem to me, but could be wrong. **Am I initializing my store state in the wrong spot?** 

```javascript
Vue.use(Vuex);

export default new Vuex.Store({
    state: {},
    getters: {
        getVacation: state =&gt; {
            return state.vacation
        },
        guests: state =&gt; {
            return state.vacation.guests
        },
        verifiedGuests: state =&gt; {
            return state.vacation.guests.filter(guest =&gt; guest.verified)
        },
        emergencyContacts: state =&gt; {
            return state.emergency_contacts
        },
        arrival: state =&gt; {
            return state.vacation.check_in
        },
        departure: state =&gt; {
            return state.vacation.check_out
        },
        countdown: state =&gt; {
            let check_in = new Date(state.vacation.check_in);
            let now = new Date();

            if ((now - check_in) &gt; 0) {
                return &#39;This vacation started on &#39; + check_in;
            }

            let difference = check_in - now;
            let day = 1000 * 60 * 60 * 24;

            return Math.ceil(difference / day) + &quot; days until your vacation&quot;;
        }
    },
    mutations: {
        [UPDATE_VACATION](state, payload) {
            state.vacation = payload.vacation;
        },
        [ADD_GUEST](state, payload) {
            state.vacation.guests.push(payload.guest);
        },
        [REMOVE_GUEST](state, payload) {
            state.vacation.guests.filter(guest =&gt; {
                debugger;
                return guest.id != payload.guest.id
            })
        },
        [UPDATE_GUEST](state, payload) {
            state.vacation.guests.map(guest =&gt; {
                // Refactor Object.assign to deep cloning of object
                return guest.id === payload.guest.id ? Object.assign({}, guest, payload.guest) : guest;
            })
        },
        [ADD_EMERGENCY](state, payload) {
            state.vacation.emergency_contacts.push(payload.emergency_contact)
        },
        [REMOVE_EMERGENCY](state, payload) {
            state.vacation.emergency_contacts.filter(contact =&gt; contact.id !== payload.emergency_contact.id)
        },
        [UPDATE_EMERGENCY](state, payload) {
            state.vacation.emergency_contacts.map(contact =&gt; {
                // Refactor not needed because emergency_contact is a shallow object.
                return contact.id === payload.emergency_contact.id ? Object.assign({}, contact, payload.emergency_contact) : contact;
            });
        }
    },
    actions: {
        getVacation({
            commit
        }) {
            api.getVacation().then(vacation =&gt; commit(UPDATE_VACATION, vacation))
        },
        addGuest({
            commit
        }, guest) {
            commit(ADD_GUEST, guest);
        },
        removeGuest({
            commit
        }, guest) {
            commit(REMOVE_GUEST, guest);
        },
        updateGuest({
            commit
        }, guest) {
            commit(UPDATE_GUEST, guest);
        },
        addEmergency({
            commit
        }, guest) {
            commit(ADD_EMERGENCY, contact)
        },
        removeEmergency({
            commit
        }, contact) {
            commit(REMOVE_EMERGENCY, contact)
        },
        updateEmergency({
            commit
        }, contact) {
            commit(UPDATE_EMERGENCY, contact)
        },
        updateServer(store, payload) {
            return api.saveVacation(payload)
        }
    }
});
```

Just so the solution is clear to others: 

I wasn&#39;t setting my initial state quite properly in the store itself. I was pulling in the data, and updating the store correctly, but the store needed to be initialized like this:
 
```javascript
export default new Vuex.Store({
    state: {
        vacation: {} //I added this, and then justed updated this object on create of the root Vue Instance
    },
});
```


All Vuex Solutions on Gang of Coders

Total of 30 Vuex Solutions