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