Vuex getters-properties Failure when using vue-router - they failed to be reactive

Question

First, there is user.js, which is one of the modules for store.js

const state = {
  isLogin: false
}

const mutations = {
  login(state, userid){
    state.userid = userid;
  }
}

export default {
  state,
  mutations
}

Using Vue-router, I created an App Component, and imported store.js.
And then comes the Component login.vue. Following is part of the codes:

<script>    
export default {
  vuex: {
    actions: {
        login  // this action changes the state of
               // isLogin by dispatch `login` mutation
    }
  },

  methods: {
    btnClick(){
      // here calls the login action
    }
  }
} 
</script>

I noticed that the method btnClick can work in this component. It did changed the store.state.user.isLogin.

But here is another component a.vue listening the isLogin state:

<template>
...
  <a
    v-if="isLogin" 
    v-link="'#'">
    ...
  </a>
...
</template>

<script>
// import something
export default {
    vuex: {
      getters: {
        isLogin: ({ user }) => user.isLogin
      }
    }
}
</script>

When btnClick toggled in login.vue, the isLogin changed. But it seems that though the getter isLogin in a.vue was changed, thev-ifin <a> was not able to be reactive, for the <a> didn't appear.

I have tried to test if store is injected to child Components, and the result is it have passed. Also, I have tried to use computed instead of getters to listen isLogin, and it failed to be reactive either. when adding isLogin in watch attributes, it failed to watch.

And there is one thing that I am quite sure -- the Vue.use(Vuex) is not missed.

I was wondering whether it is the Vue-router which caused the problem.
And it seems that no one have asked questions about vuex with vue-router...

Yerko Palma · Accepted Answer · 2016-03-18 14:48:40Z

1

I'm using vuex with vue-router and vue-resource (if you are authenticating users I assume that you are making HTTP requests) and it works just fine.

I think that your problem is your getter declaration. Getters receive the state inside the store object, and in your store declaration I don't see that the isLogin option is a property of user. I would change your getter to this.

vuex: {
  getters: {
    isLogin: state => state.isLogin
  }
}

edited Mar 18, 2016 at 14:48

answered Mar 18, 2016 at 14:27

Yerko Palma

12.4k5 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeff Over a year ago

I think when you do a modular Vuex build, as he has done here, the module itself becomes a property on state. So since it was a module called user, it does become a property of state, and the isLogin property would be at state.user.isLogin

Sam Chow Over a year ago

I see. This is just my foolish mistake. Now it works! Thank you.

Jeff · Accepted Answer · 2016-03-18 19:50:29Z

1

Are you updating isLogin anywhere? You are logging in a user by setting a non-existing property on state called userid, and not setting state.isLogin anywhere. I don't know if setting that non-declared property will work, and also generally in Vue a variable has to be declared from the start in order to be responsive. Should look like:

const state = {
  isLogin: false,
  userid:0
}

const mutations = {
  login(state, userid){
    state.userid = userid;
    state.isLogin = true;
  }
}

answered Mar 18, 2016 at 19:50

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

1 Comment

Sam Chow Over a year ago

Thanks for your answering. I have solved this problem so far. As you see, I just made a silly mistake. 😄

Lyman Lai · Accepted Answer · 2016-06-14 10:45:50Z

0

as Jeff says, for my problem, I also make a module, so we have to make it like this state.user.isLogin

answered Jun 14, 2016 at 10:45

Lyman Lai

1911 silver badge4 bronze badges

Collectives™ on Stack Overflow

Vuex getters-properties Failure when using vue-router - they failed to be reactive

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related