Vue狀態管理

1、導入Vuex

import Vuex from 'vuex'

2、定義store

/*狀態管理*/
const store = new Vuex.Store({
  state: {
    headerShow: true//是否顯示頭部
  },
  mutations: {  //不應直接更改state,應通過mutations下的方法來更改狀態
    setHeaderShow(state, newValue) {
      this.state.headerShow = newValue;
    }
  }
});

3、將store註入

new Vue({
  store,//把 store 對象提供給 “store” 選項，這可以把 store 的實例註入所有的子組件
  render: h => h(App)
}).$mount('#app-box')

4、store狀態更改

this.$store.commit('setHeaderShow', true);

5、子組件中獲取狀態 使用mapState

import { mapState } from 'vuex'

  export default {
    name: 'app',
    components: {
  
    },
    computed: {
      ...mapState({
        headerShow: state => state.headerShow
      })
    },
}