Vuex getters-özellikleri Arıza vue-yönlendirici kullanıyorsanız - onlar

Question

İlk reaktif olması için başarısız, Vue-yönlendirici kullanma store.js

const state = { 
    isLogin: false 
} 

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

export default { 
    state, 
    mutations 
} 

için modüllerden biri olan user.js var, ben bir App Bileşen yarattı ve store.js ithal edildi.
Ve sonra Bileşen login.vue gelir.

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

Ben metot btnClick bu bileşen çalışabilir fark: Aşağıdaki kodları bir parçasıdır. store.state.user.isLogin değiştirildi.

btnClick login.vue toggled

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

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

, isLogin değişti:

Ama burada isLogin devlet dinleme başka bir bileşen a.vue olduğunu. Ancak, a.vue sürümündeki isLogin bulucu değiştirilmiş olsa da, <a>v-if'un <a> görünmediği için reaktif olamayacağı anlaşılıyor.

store'un alt Bileşenlere enjekte edilip edilmediğini test etmeye çalıştım ve sonuç geçti. Ayrıca, isLogin'u dinlemek için yerine computed'u kullanmayı denedim ve bu da yanıt veremedi. isLogin, watch öznitelikleri eklerken, izleme başarısız oldu.

Ve emin olduğum bir şey var - Vue.use(Vuex) kaçırılmadı.

Soruna neden olan Vue-router olup olmadığını merak ediyordum.
Ve kimse vue-router ile vuex hakkında sık sorulan sorular görünüyor ki ...

Answer 1

(eğer kullanıcıların kimliklerini doğrulamaktadır eğer HTTP isteklerini yapıyoruz varsayabiliriz) Ben vue-router ile vuex ve vue-resource kullanıyorum ve çok işe yarıyor ince.

Bence senin sorununun, senin alıcı beyanı olduğunu. Getters, store nesnesinin içinde state alır ve mağaza bildiriminde isLogin seçeneğinin user bir özelliği olduğunu görmüyorum. Alıcını buna değiştiririm.

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

Answer 2

her yerde isLogin güncelleştiriyorsunuz? userid adı verilen state üzerinde olmayan bir özelliği ayarlayarak ve herhangi bir yerde state.isLogin ayarlamamış bir kullanıcı olarak oturum açıyorsunuz. Bildirilmemiş mülkün çalışacağını ve genel olarak Vue'da ayarlanıp ayarlanmayacağını bilmek, bir değişkenin yanıt verebilmek için başlangıçtan bildirilmesi gerekip gerekmediğini bilmem.gibi görünmelidir:

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

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

Answer 3

Jeff benim sorunu için, ben de bir modül yapmak söylüyor nedenle size modüler Vuex yapı ne zaman olarak, sanırım bu state.user.isLogin