VueJS。 VueX理解の問題

Question

私はVueJs + VueXを使用してSPAを構築し、あるコンポーネントでは「ログイン」と「サインアップ」ボタンをクリックし、他のコンポーネントでは<component></component>タグを条件付きでレンダリングする必要があります（「SignUp」フォームと「ログインフォーム」）。モーダルもコンポーネントです。
console.logを呼び出すと、どのボタンがクリックされたかによってstate.currentViewが変化するのがわかりますが、{{$ data | json}}内のマークアップは、状態が変更されておらず、モーダルが変更されていないことがより重要であることを示しています。だから私は、次のようにコードをしました：

App.vue：Navbar.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> 

私は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-routerをチェックしてくださいアディー。あなたが望むのと同じことを達成し、それに従うのが簡単なコードを提供するかもしれません。

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データとの反応性を維持します。