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 组件，并导入了 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 发生了变化。但是好像a.vue里的getterisLogin变了，<a>里的v-if就没法反应了，因为<a> 没有出现。

我试过是否给子组件注入store，结果是通过了。另外，我曾尝试使用 computed 而不是 getters 来收听 isLogin，但它也未能响应。在watch属性中添加isLogin时，无法观看。

有一件事我很确定 -- Vue.use(Vuex) 没有遗漏。

我想知道是否是 Vue-router 导致了问题。
而且似乎没有人问过关于 vuex 和 vue-router 的问题...

Answer 1

我将 vuex 与 vue-router 和 vue-resource 一起使用（如果您正在对用户进行身份验证，我假设您正在发出 HTTP 请求）并且它工作正常。

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

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

Answer 2

您要在任何地方更新 isLogin 吗？您通过在 state 上设置一个名为 userid 的不存在的属性而不是在任何地方设置 state.isLogin 来登录用户。我不知道设置未声明的属性是否有效，而且通常在 Vue 中，必须从一开始就声明一个变量才能响应。应该看起来像：

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

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

Answer 3

正如Jeff所说，对于我的问题，我也制作了一个模块，所以我们必须这样制作 state.user.isLogin

Vuex getters-properties 使用 vue-router 时失败 - 它们无法响应

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

vue.js

vue-router