Question

我使用VueJs + VueX构建SPA，我在一个组件中点击“登录”和“注册”按钮，在其他组件中点击<component></component>标签，其中有条件地渲染1到模态（“SignUp” “表格和”登录表格“）。模态也是组件当我调用console.log时，我看到state.currentView根据点击的按钮而改变，但是检查{{$ data |内部标记显示状态没有改变，更重要的是模态没有改变。所以我的代码如下：

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-router。它将完成您想要的相同的事情，并可能提供更容易遵循的代码。

Answer 2

你应该做的是使用计算属性制作一个getter并将其拉入你的组件。

你的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数据的反应性。

VueJS。 VueX理解问题

2 个答案: