VueJS. Проблема с пониманием VueX

Question

Я создаю SPA, используя VueJs + VueX, и у меня есть кнопки «Вход» и «Регистрация», которые нужно щелкнуть в одном компоненте, и тег <component></component> в другом компоненте, где должно быть условно отображено 1 из Модалей («SignUp») форма и «Форма входа»). Модалы также являются компонентами.
Когда я вызываю console.log, я вижу, что state.currentView изменяется в зависимости от того, какая кнопка нажата, но проверяя {{$ data | json}} внутри разметки показывает, что состояние не было изменено и что более важно, модальность не меняется. Так что я имею код следующим образом:

App.vue:

<template> 
    <navbar></navbar> 
    <component v-bind:is="currentView"></component> 
</template> 

<script> 
import Login from './components/Login' 
import Signup from './components/Signup' 
import Navbar from './components/Navbar' 
import NavbarInner from './components/NavbarInner' 

import store from './vuex/store' 

export default { 
name: 'app', 
data() { 
    return { 
    currentView: this.$store.state.currentView 
    } 
}, 
components: { 
    Login, 
    Signup, 
    Navbar, 
}, 
store 
} 
</script> 

В шаблоне Navbar.vue я держать кнопки и методы для изменения состояния CurrentView:

<md-button class="navbar__link" 
       @click="changeCurrentModal('Signup')"> 
     Sign Up 
    </md-button> 

    <md-button class="navbar__link" 
       @click="changeCurrentModal('Login')"> 
     Login 
    </md-button> 

    export default { 
    name: 'navbar', 
    computed: { 
     currentView() { 
     return this.$store.state.currentView 
     } 
    }, 
    methods: { 
     changeCurrentModal (curentView) { 
     this.$store.commit('changeCurrentModal', curentView) 
    } 
    } 
} 
</script> 

Моего store.js файл выглядит следующим образом:

import Vue from 'vue' 
import Vuex from 'vuex' 

Vue.use(Vuex) 

export default new Vuex.Store({ 
state: { 
    currentView: 'Signup' 
}, 
mutations: { 
    changeCurrentModal: (state, currentView) => { 
    console.log(currentView) 
    state.currentView = currentView 
    } 
}, 
actions: { 
    changeCurrentModal: ({commit}, currentView) => { 
    commit('changeCurrentModal', currentView) 
    } 
    } 
}) 

Answer 1

Хотя вы получили Vuex на работу, вы можете проверить Vue-маршрутизатор, если вы не ALRE отовы. Он выполнит то же самое, что вы хотите, и может предложить код, который будет легче следовать.

Answer 2

Что вам нужно сделать, это сделать геттер и потянуть его в свой компонент с помощью вычислимого свойства.

Ваш vuex стал бы ...

... 

export default new Vuex.Store({ 
    state: { 
     currentView: 'Signup' 
    }, 
    getters: { 
     getCurrentView: state => { 
      return state.currentView 
     } 
    } 
    mutations: { 
     ... 
    }, 
    actions: { 
     ... 
    } 
}) 

И вы вычислили проп будет выглядеть следующим образом ...

computed: { 
    currentView() { 
    return this.$store.getters.getCurrentView 
    } 
} 

Делая это, вы будете поддерживать реактивность с vuex данных.