Vue状态管理

2018-07-09 13:48:05来源：博客园阅读 ()

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有