In primo luogo, v'è user.js
, che è uno dei moduli per store.js
Vuex Getters-properties mancata quando si utilizza vue-router - che non è riuscito a essere reattivi
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
...
Credo che quando si esegue una build Vuex modulare, come lui ha fatto qui, il modulo stesso diventa una proprietà su 'state'. Quindi dal momento che si trattava di un modulo chiamato 'utente', diventa una proprietà di stato e la proprietà' isLogin' si trova in 'state.user.isLogin' – Jeff
vedo. Questo è solo il mio errore sciocco. Ora funziona! Grazie. –