vue.js - vue router tutorial

Vuex getters-properties Fallo al usar vue-router: no pudieron ser reactivos

Question

Primero, hay user.js , que es uno de los módulos para store.js

const state = {
  isLogin: false
}

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

export default {
  state,
  mutations
}

Usando Vue-router, creé un componente de aplicación e store.js .
Y luego viene el Componente login.vue . Lo siguiente es parte de los códigos:

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

Noté que el método btnClick puede funcionar en este componente. Cambió el store.state.user.isLogin .

Pero aquí hay otro componente a.vue escuchando el estado isLogin :

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

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

Cuando btnClick alternó en login.vue , isLogin cambió. Pero parece que aunque el getter isLogin en a.vue fue cambiado, el v-if en <a> no pudo ser reactivo, porque el <a> no apareció.

Intenté probar si la store se inyecta a componentes secundarios y el resultado es que ya pasó. Además, he intentado usar computed lugar de getters para escuchar isLogin , y tampoco fue reactiva. cuando se agrega isLogin en watch atributos de watch , no se pudo ver.

Y hay una cosa que estoy bastante seguro: el Vue.use(Vuex) no se pierde.

Me preguntaba si fue el Vue-router el causante del problema.
Y parece que nadie ha hecho preguntas sobre vuex con vue-router ...

Answer 1

¿Estás actualizando isLogin cualquier lugar? Está iniciando sesión en un usuario configurando una propiedad no existente en el state llamado userid , y no configurando state.isLogin ningún lado. No sé si la configuración de esa propiedad no declarada funcionará, y también generalmente en Vue, una variable debe declararse desde el principio para que responda. Debería verse así:

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

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

Answer 2

Estoy usando vuex con vue-router y vue-resource (si estás autenticando usuarios, supongo que estás haciendo solicitudes HTTP) y funciona muy bien.

Creo que tu problema es tu declaración getter. Los Getters reciben el state dentro del objeto de la store , y en la declaración de su tienda no veo que la opción isLogin sea ​​una propiedad del user . Yo cambiaría tu getter a esto.

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

Answer 3

como dice Jeff, para mi problema, también hago un módulo, así que tenemos que hacerlo así state.user.isLogin