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中的getter a.vue发生了变化，但v-if中的<a>无法被动反应，因为<a>没有＆＃39} ; t出现。

我试图测试store是否注入了子组件，结果是它已经通过了。另外，我尝试使用computed代替getters来监听isLogin，但它也没有被动反应。在isLogin属性中添加watch时，无法观看。

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

我想知道导致问题的是Vue-router是不是。{ 而且似乎没有人通过vuex ...

向vue-router提出问题

Answer 1

我正在使用vuex vue-router和vue-resource（如果您正在对用户进行身份验证，我认为您正在发出HTTP请求）并且它运行正常。

我认为你的问题是你的getter声明。 Getter会在state对象中收到store，并且在您的商店声明中，我看不到isLogin选项是user的属性。我会改变你的吸气剂。

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

Answer 2

您是否在任何地方更新isLogin？您通过在名为state的{{1}}上设置不存在的属性，而不是在任何位置设置userid来登录用户。我不知道设置非声明属性是否有效，并且通常在Vue中，必须从头开始声明变量以便响应。应该是这样的：

state.isLogin

Answer 3

杰夫说，对于我的问题，我也制作了一个模块，所以我们必须这样做


state.user.isLogin

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

3 个答案: