Vuex pobierające-properties Niepowodzenie przy stosowaniu vue routerem - nie udało się reaktywny

Question

Po pierwsze, nie jest user.js, który jest jednym z modułów do store.js

const state = { 
    isLogin: false 
} 

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

export default { 
    state, 
    mutations 
} 

Stosując Vue routerem, utworzonego składnik aplikacji i zaimportowane store.js.
Następnie pojawia się komponent login.vue. Oto część z kodów:

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

Zauważyłem, że metoda btnClick może pracować w ten składnik. Zmieniło to store.state.user.isLogin.

Ale tu jest inny składnik a.vue słuchanie stan isLogin:

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

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

Kiedy btnClick przełączana w login.vue The isLogin zmieniło. Wygląda jednak na to, że chociaż zmienił się getter isLogin w, to v-if w <a> nie może być reaktywny, ponieważ <a> nie pojawiło się.

Próbowałem sprawdzić, czy store jest wstrzykiwany do komponentów potomnych, a wynikiem jest, że minął. Ponadto próbowałem użyć computed zamiast getters do odsłuchania isLogin, a także nie było ono reaktywne. podczas dodawania atrybutów isLogin w nie udało się obejrzeć.

I jest jedna rzecz, którą jestem całkiem pewny - Vue.use(Vuex) nie jest pominięty.

Zastanawiam się, czy to jest Vue-router, który spowodował problem.
I wydaje się, że nikt nie zadawane pytania o vuex z vue-router ...

Answer 1

Używam vuex z vue-router i vue-resource (jeśli uwierzytelnianie użytkowników Zakładam, że robisz żądań HTTP) i działa tylko w porządku.

Myślę, że Twoim problemem jest Twoja deklaracja gettera. Gettery otrzymują state wewnątrz obiektu store, aw deklaracji sklepu nie widzę, aby opcja isLogin była własnością user. Zmieniłbym twojego gettera na ten.

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

Answer 2

Czy aktualizujesz isLogin w dowolnym miejscu? Logujesz się użytkownika, ustawiając nieistniejącą właściwość pod numerem state o nazwie userid, a nie ustawiając wartości state.isLogin w dowolnym miejscu. Nie wiem, czy ustawienie niezadeklarowanej właściwości będzie działać, a także ogólnie w Vue zmienna musi być zadeklarowana od początku, aby była responsywna.Powinna wyglądać następująco:

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

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

Answer 3

jak Jeff mówi do mojego problemu, ja również moduł, tak musimy zrobić to jak to state.user.isLogin