鍍金池/ 問(wèn)答/HTML/ vuex，組件改變狀態(tài)，父組件沒(méi)反應(yīng)。

vuex，組件改變狀態(tài)，父組件沒(méi)反應(yīng)。

圖片描述

父

<template>
    <div>    
        <!-- <vue-lazy-component :timeout="100">
           <xy-hello></xy-hello>
        </vue-lazy-component> -->
        {{ifShowFooter}}
        <router-view class="content-view"></router-view>
        <xy-footer v-show="ifShowFooter"></xy-footer>
    </div>
</template>

<script>
// alert()
import {
    // xyHello,
    xyFooter
} from '@/components';
import store from '@/vuex/store'
console.log()
export default {
    name: 'index',
    data() {
        return {
            ifShowFooter:store.state.mainState.ifShowFooter
        }     
    },
子頁(yè)面
  <template>
  <div class="works">
       <!-- {{$store.state.mainState.ifShowFooter}} -->
       <button v-on:click="change">按鈕</button>
  </div>
</template>

<script>
import store from '@/vuex/store'
console.log(store)
export default {
  components: {
  },
  data() {
    return {
    }
  },
  created: function() {
  },
  mounted() {
  },
  methods: {
    change(){
      this.$store.commit('mainState/setShowFooter',false);
    }
  },
  store
回答
編輯回答
情已空

ifShowFooter不要寫(xiě)在 data 里
寫(xiě)在 computed 里

computed:{
    ifShowFooter(){
        return this.$store.state.mainState.ifShowFooter
    }
}
2017年10月2日 01:03
編輯回答
瞄小懶

要注意，vuex是單項(xiàng)數(shù)據(jù)流，你在初始化的時(shí)候獲取到ifShowFooter為true，雖然你之后改變?yōu)閒alse，但是頁(yè)面的數(shù)據(jù)并沒(méi)有重新獲取一遍，所以底部組件并沒(méi)有隱藏。可以使用computed來(lái)實(shí)現(xiàn)

2017年7月1日 09:36