vuex，组件改变状态，父组件没反应。

Question

父

<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
        }     
    },

子页面

  <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  
    
    

Answer 1

要注意，vuex是单项数据流，你在初始化的时候获取到ifShowFooter为true，虽然你之后改变为false，但是页面的数据并没有重新获取一遍，所以底部组件并没有隐藏。可以使用computed来实现

Answer 2

ifShowFooter不要写在 data 里
写在 computed 里

computed:{
    ifShowFooter(){
        return this.$store.state.mainState.ifShowFooter
    }
}