您的位置:首页 > 产品设计 > UI/UE

Vue状态管理

2017-12-05 16:08 537 查看
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
})
},
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: