Vuex getters-properties Error using vue-router - they did not respond

Question

Firstly, 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 application component and imported store.js .
And then comes the login.vue component. The 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 btnClick method may work in this component. He changed store.state.user.isLogin .

But here is another a.vue component that listens for 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 switched to login.vue , isLogin changed. But it seems that although the isLogin getter in a.vue been changed, v-if in <a> could not be reactive because <a> not displayed.

I tried to check if store added to child components and the result passed. Also, I tried using computed instead of getters to listen for isLogin , and it also did not respond. when adding isLogin attributes to watch he could not watch.

And there is one thing I'm sure: Vue.use(Vuex) not missing.

I was wondering if this caused the Vue-router problem.
And nobody seemed to be asking questions about vuex using Vue-router ...

Answer 1

I use vuex with vue-router and vue-resource (if you check users, I assume you are making HTTP requests) and it works fine.

I think your problem is your getter declaration. Getters get state inside the store object, and in the storage declaration I do not see that the isLogin parameter is a user property. I would change your getter to this.

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

Answer 2

Are you updating isLogin anywhere? You register as a user by setting a nonexistent property to state called userid and not setting state.isLogin anywhere. I don’t know if setting that an undeclared property will work, and also, as a rule, in Vue, a variable must be declared from the very beginning in order to be responsive. It should look like:

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

Answer 3

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