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

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Vue状态管理

关键词：VUE