Vuex Getters-properties mancata quando si utilizza vue-router - che non è riuscito a essere reattivi

Question

In primo luogo, v'è user.js, che è uno dei moduli per store.js

const state = { 
    isLogin: false 
} 

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

export default { 
    state, 
    mutations 
} 

Utilizzando Vue-router, ho creato un componente App e importato store.js.
E poi arriva la Componente login.vue. A seguito fa parte dei codici:

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

ho notato che il metodo btnClick può lavorare in questo componente. Ha cambiato il store.state.user.isLogin.

Ma qui è un altro componente a.vue ascoltare lo stato isLogin:

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

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

Quando btnClick attivata nel login.vue, il isLogin cambiato. Ma sembra che nonostante il getter isLogin in a.vue sia stato modificato, lo v-if in <a> non è stato in grado di essere reattivo, perché il <a> non è stato visualizzato.

Ho provato a testare se store è stato iniettato su Componenti figlio e il risultato è stato superato. Inoltre, ho provato a utilizzare computed anziché getters per ascoltare isLogin e non è riuscito a essere reattivo. quando si aggiunge isLogin negli attributi watch, non è riuscito a guardare.

E c'è una cosa di cui sono abbastanza sicuro: il Vue.use(Vuex) non è mancato.

Mi chiedevo se è il Vue-router che ha causato il problema.
E sembra che nessuno ha chiesto domande su vuex con vue-router ...

Answer 1

sto usando vuex con vue-router e vue-resource (se si esegue l'autenticazione degli utenti suppongo che si stanno facendo le richieste HTTP) e funziona solo bene.

Penso che il tuo problema sia la tua dichiarazione getter. I getter ricevono lo state all'interno dell'oggetto store e nella dichiarazione del negozio non vedo che l'opzione isLogin sia una proprietà di user. Vorrei cambiare il tuo getter a questo.

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

Answer 2

Stai aggiornando isLogin ovunque? Stai accedendo a un utente impostando una proprietà non esistente su state chiamato userid e non impostando state.isLogin ovunque. Non so se l'impostazione di quella proprietà non dichiarata funzionerà, e anche in generale in Vue una variabile deve essere dichiarata dall'inizio per essere reattiva.Dovrebbe essere simile:

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

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

Answer 3

come Jeff dice, per il mio problema, ho anche fare un modulo, quindi dobbiamo fare in questo modo state.user.isLogin