我使用 VueJs + VueX 构建 SPA,并且我在一个组件中单击“登录”和“注册”按钮,并<component></component>
在其他组件中标记应该有条件地呈现 1 到模态(“注册”表单和“登录表单”) . 模态也是组件。
当我调用 console.log 时,我看到 state.currentView 会根据单击的按钮发生变化,但会检查 {{ $data | json }} 内部标记显示状态没有改变,更重要的是模态没有改变。所以我的代码如下:
应用程序.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)
}
}
})