Vuex getters-properties使用vue-router时出现故障 - 它们无法被激活

Question

首先,有 user.js,这是其中一个模块store.js

const state = {
  isLogin: false
}

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

export default {
  state,
  mutations
}

使用Vue-router,我创建了一个App Component,然后导入store.js.
然后是组件login.vue.以下是代码的一部分:

<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>

我注意到该方法btnClick可以在这个组件中工作.它确实改变了store.state.user.isLogin.

但这是另一个a.vue听取isLogin状态的组件:

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

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

当btnClick切换中login.vue的isLogin改变.但似乎是,尽管吸isLogin在a.vue改变的时候,v-if在<a>没能成为反应,对于<a>没有出现.

我试图测试是否store注入了子组件,结果是它已经通过.此外,我试图使用computed而不是getters听isLogin,它也没有被反应.当添加isLogin的watch属性,它未能观看.

有一件事我很确定 - Vue.use(Vuex)不会错过.

我想知道是否是Vue-router导致问题的原因.
而且似乎没有一个人询问的问题vuex与vue-router...

Answer 1

我正在使用vuexand （如果您正在验证用户身份vue-router，vue-resource我假设您正在发出 HTTP 请求）并且它工作得很好。

我认为你的问题是你的 getter 声明。Getter 接收对象state内部store，并且在您的商店声明中我没有看到该isLogin选项是 的属性user。我会把你的 getter 改成这个。

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