5

首先，有 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.
然后是 Component 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改变了。但似乎虽然 getter isLoginina.vue发生了变化，但v-ifin<a>却无法反应，因为in<a>没有出现。

我试过测试是否store被注入到子组件中，结果是它通过了。另外，我尝试使用computed而不是gettersto listen isLogin，它也没有反应。添加属性时isLogin，watch无法观看。

还有一件事我很确定——Vue.use(Vuex)没有错过。

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

4

3 回答 3

1

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

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

vuex: {
  getters: {
    isLogin: state => state.isLogin
  }
}
于 2016-03-18T14:27:04.643 回答
1

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

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

const mutations = {
  login(state, userid){
    state.userid = userid;
    state.isLogin = true;
  }
}
于 2016-03-18T19:50:29.320 回答
0

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

于 2016-06-14T10:45:50.993 回答